webpack4+vue打包簡(jiǎn)單入門(mén)

junbaor 發(fā)布于2019-08-26 12:21 / 1508人閱讀

摘要：前言最近在研究使用的使用在查閱了數(shù)篇文章后學(xué)習(xí)了的基礎(chǔ)打包流程本來(lái)就可以一刪了之了但是覺(jué)得未免有點(diǎn)可惜所以就有了這篇文章供大家參考打包的教程具有時(shí)效性有不少作者在一直維護(hù)一篇文章超過(guò)一定時(shí)間參考價(jià)值就會(huì)下降希望各位了解這一點(diǎn)使用的依賴一覽

前言

最近在研究使用webpack的使用,在查閱了數(shù)篇文章后,學(xué)習(xí)了webpack的基礎(chǔ)打包流程.

本來(lái)就可以一刪了之了,但是覺(jué)得未免有點(diǎn)可惜,所以就有了這篇文章,供大家參考.

webpack打包的教程具有時(shí)效性,有不少作者在一直維護(hù)一篇文章.超過(guò)一定時(shí)間參考價(jià)值就會(huì)下降,希望各位了解這一點(diǎn).

使用的依賴一覽

"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.3",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.4"
},
"dependencies": {
"vue": "^2.5.17"
}

都是目前最新的穩(wěn)定版本.

講解到的內(nèi)容

webpack的安裝

webpack簡(jiǎn)單配置

vue的安裝以及使用

使用插件

提取css

使用多個(gè)配置文件

簡(jiǎn)單的代碼分離

構(gòu)建目錄

我們創(chuàng)建一個(gè)新的目錄(learnwebpack).在下面創(chuàng)建src文件夾和一個(gè)index.html.

然后我們使用npm init命令初始化一個(gè)package.json文件,直接一路回車(chē)過(guò)去就好了.

目錄結(jié)構(gòu):

learnwebpack

src

index.html

package.json

src保存我們未經(jīng)編譯的源碼.

index.html內(nèi)容如下:




    
    
    
    Webpack4 && Vue

安裝webpack

在webpack4中不僅僅需要安裝webpack本身,還需要安裝webpack-cli.

npm install webpack webpack-cli --save-dev

使用--save-dev參數(shù)會(huì)將這兩個(gè)包添加到package.json的開(kāi)發(fā)依賴中.

webpack4的特性

在webpack4中可以實(shí)現(xiàn)0配置打包,也就是說(shuō)不需要任何設(shè)置就可以完成簡(jiǎn)單的打包操作.

此外最實(shí)用的特性之一就是mode配置選項(xiàng)用于告訴webpack輸出模式是開(kāi)發(fā)還是產(chǎn)品,提供了已經(jīng)預(yù)先定義好的常用配置.

后面的例子中我們會(huì)使用到mode.

webpack的簡(jiǎn)單配置

我們?cè)诋?dāng)前目錄下新建一個(gè)webpack的配置文件webpack.config.js.

此時(shí)的目錄結(jié)構(gòu)為:

learnwebpack

src

index.html

webpack.config.js

package.json

webpack.config.js的內(nèi)容:

const {join:pathJoin} = require("path");
module.exports = {
    entry:{
        app:"./src/index.js" // 入口文件的位置
    },
    output:{
        filename:"[name].bundle.js", // 輸出文件名字的格式
        path:pathJoin(__dirname,"./dist") // 輸出的絕對(duì)路徑
    },
}

為什么會(huì)有filename上的格式

對(duì)于我們當(dāng)前的應(yīng)用來(lái)說(shuō)好像沒(méi)有任何用途,打包后文件名完全可以和入口一樣.

使用不同的文件名可以解決相同文件名稱導(dǎo)致的瀏覽器緩存問(wèn)題.

對(duì)于我們當(dāng)前這個(gè)格式來(lái)說(shuō),打包后的文件名稱為app.bundle.js.

此外還有一些額外的模板符號(hào):

[hash] 模塊標(biāo)識(shí)符(module identifier)的 hash

[chunkhash] chunk 內(nèi)容的 hash

[name] 模塊名稱

[id] 模塊標(biāo)識(shí)符(module identifier)

[query] 模塊的 query，例如，文件名 ? 后面的字符串

現(xiàn)在讓我們?cè)趕rc文件夾下新建一個(gè)index.js,只寫(xiě)一行簡(jiǎn)單的代碼用于測(cè)試:

console.log("hello world!");

此時(shí)的目錄結(jié)構(gòu)為:

learnwebpack

src

index.js

index.html

webpack.config.js

package.json

為什么使用index.js

webpack4中零配置的默認(rèn)入口位置就是當(dāng)前配置路徑下的./src/index.js,也就是說(shuō)如果不指定入口的情況下也是可以打包的.

構(gòu)建我們的項(xiàng)目

運(yùn)行:

./node_modules/.bin/webpack-cli --config webpack.config.js

上方的命令有點(diǎn)冗長(zhǎng),我們使用package.json中scripts字段來(lái)定義一個(gè)快捷方式.

package.json:

{
  +++
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
  +++
}

+++ 表示package.json的其他字段,這部分目前不用關(guān)心.

現(xiàn)在運(yùn)行這條簡(jiǎn)化的命令,效果和上方一樣.

npm run build

對(duì)于npm版本高于5.2.0的同學(xué)可以嘗試使用npm的附帶模塊npx.

npx可以直接運(yùn)行./node_modules/.bin/下的內(nèi)容而不必輸入路徑.

npx webpack --config webpack.config.js

如果操作正確你的目錄下應(yīng)該會(huì)多出一個(gè)dist文件夾,內(nèi)部有一個(gè)app.bundle.js文件.

此時(shí)的目錄結(jié)構(gòu):

learnwebpack

dist

app.bundle.js

src

index.js

index.html

webpack.config.js

package.json

我們可以運(yùn)行index.html了,如果一切順利.那么在控制臺(tái)中應(yīng)該會(huì)出現(xiàn)hello world!.

錯(cuò)誤

當(dāng)我們打包的時(shí)候webpack4會(huì)報(bào)錯(cuò),原因就是我們沒(méi)有指定上文中提到的mode屬性,webpack默認(rèn)將他設(shè)置為production.

此時(shí)如果你查看代碼,就會(huì)發(fā)現(xiàn)代碼是經(jīng)過(guò)壓縮的,這是webpack4的默認(rèn)行為之一.

WARNING in configuration
The "mode" option has not been set, webpack will fallback to "production" for this value. Set "mode" option to "development" or "production" to enable defaults for each environment.
You can also set it to "none" to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

安裝Vue

使用npm安裝:

npm -i vue

vue是運(yùn)行時(shí)依賴,webpack需要合適loader將vue文件解釋為webpack可以理解的格式用于構(gòu)建,所以我們需要vue-loader來(lái)轉(zhuǎn)換vue單文件.

使用npm安裝vue-loader:

npm install vue-loader --save-dev

vue單文件中分為三個(gè)部分,其中template部分需要專(zhuān)用的插件進(jìn)行轉(zhuǎn)換.

安裝vue-template-compiler:

npm install  vue-template-compiler --save-dev

這個(gè)使用vue-loader自動(dòng)調(diào)用的插件,也是官方默認(rèn)的,不需要任何配置.

如果你不使用他,打包的時(shí)候會(huì)報(bào)錯(cuò).

簡(jiǎn)單來(lái)說(shuō)他的功能是將template部分的模板轉(zhuǎn)為render函數(shù).

然后我們需要處理css,vue-loader需要css-loader才可以運(yùn)行.

安裝css-loader:

npm install css-loader --save-dev

css-loader的作用僅僅是將css轉(zhuǎn)為webpack可以解釋的類(lèi)型,如果我們需要將樣式使用起來(lái)插入到html中,必須使用額外的插件.

安裝vue-style-loader:

npm install vue-style-loader --save-dev

vue-style-loader是由vue官方維護(hù)的你也可以使用其他的loader來(lái)處理css,他除了提供了常見(jiàn)的插入樣式到html的功能以外還提供了其他的功能,例如熱更新樣式等.

修改配置

webpack.config.js:

const {join:pathJoin} = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin"); // +++
module.exports = {
    mode:"production",
    entry:{
        app:"./src/index.js"
    },
    output:{
        filename:"[name].bundle.js",
        path:pathJoin(__dirname,"./dist")
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"] // +++
            },
            {
                test: /.css$/,
                use: ["vue-style-loader","css-loader"] // +++
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin() // +++
    ]
}

需要注意的是VueLoaderPlugin在vue-loaderv15的版本中,這個(gè)插件是必須啟用的.

修改目錄結(jié)構(gòu)以及文件

我們?cè)?b>src下創(chuàng)建一個(gè)pages文件夾并且在內(nèi)部創(chuàng)建一個(gè)app.vue文件.

此時(shí)的目錄結(jié)構(gòu):

learnwebpack

dist

app.bundle.js

src

pages

app.vue

index.js

index.html

webpack.config.js

package.json

app.vue文件內(nèi)容:

app.vue是由index.js引用的,回過(guò)頭來(lái)我們修改index.js:

import Vue from "vue"
import App from "./pages/app.vue";

new Vue({
    el:"#root",
    render:h=>h(App)
})

激動(dòng)人心的時(shí)候到了,如果一切順利你的vue應(yīng)用應(yīng)該打包完成了,運(yùn)行index.html就可以查看這個(gè)結(jié)果了.

使用插件

回顧前面的一個(gè)話題,指定輸出文件名字格式.如果你將我們的內(nèi)容放到一個(gè)服務(wù)器上運(yùn)行,你會(huì)很容易發(fā)現(xiàn)一個(gè)問(wèn)題.

就是緩存,web上的資源瀏覽器會(huì)對(duì)其進(jìn)行緩存,但是對(duì)開(kāi)發(fā)的時(shí)候,或者產(chǎn)品中的代碼更新十分不友好,新的代碼不會(huì)得到及時(shí)的使用.

我們讓資源每次的名字不一樣就可以簡(jiǎn)單的解決這個(gè)問(wèn)題,接下來(lái)修改我們的webpack.config.js:

const {join:pathJoin} = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
    +++
    output:{
        filename:"[name].[hash].js",
        path:pathJoin(__dirname,"./dist")
    },
    +++
}

此時(shí)再次修改代碼打包每次的名字都不會(huì)一樣.

但是出現(xiàn)了另外一個(gè)問(wèn)題由于資源名字每次都不一致,每次我都需要手動(dòng)指定index.html中引用的資源,這個(gè)時(shí)候該html-webpack-plugin出場(chǎng)了.

這個(gè)插件可以自動(dòng)生成一個(gè)html文件,并且將資源文件按照正確順序插入到html中.

安裝html-webpack-plugin:

npm install html-webpack-plugin --save-dev

webpack.config.js添加配置

const {join:pathJoin} = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry:{
        app:"./src/index.js"
    },
    output:{
        filename:"[name].[hash]].js",
        path:pathJoin(__dirname,"./dist")
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /.css$/,
                use: ["vue-style-loader","css-loader"]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"template.html",// 指定模板html文件
            filename:"index.html"http:// 輸出的html文件名稱
        }),
        new VueLoaderPlugin()
    ]
}

然后我們把index.html重命名為template.html,將template.html中的script標(biāo)簽刪除.

指定模板后HtmlWebpackPlugin會(huì)保留原來(lái)html中的內(nèi)容,而且會(huì)在新生成的html文件中把script插入到合適的位置.

HtmlWebpackPlugin補(bǔ)充

注意:HtmlWebpackPlugin必須位于插件數(shù)組的首位.

運(yùn)行項(xiàng)目

你會(huì)發(fā)現(xiàn)在dist目錄下會(huì)有index.html文件,而我們打包后的index.js的輸出文件名也變成了app.XXXXXXXXXXXXXXXX.js的格式,更加神奇的是在index.html中自動(dòng)插入了script標(biāo)簽來(lái)引用打包后的js文件.

使用CleanWebpackPlugin插件

當(dāng)你多次打包的時(shí)候,你會(huì)發(fā)現(xiàn)由于使用hash來(lái)命名輸出的文件每次的文件名稱都不一樣,導(dǎo)致文件越來(lái)越多.

使用CleanWebpackPlugin可以每次構(gòu)建前清空輸出目錄.

安裝:

npm install clean-webpack-plugin --save-dev

webpack.config.js:

const {join:pathJoin} = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");// +++
module.exports = {
    entry:{
        app:"./src/index.js"
    },
    output:{
        filename:"[name].[hash]].js",
        path:pathJoin(__dirname,"./dist")
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /.css$/,
                use: ["vue-style-loader","css-loader"]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"template.html",
            filename:"index.html"
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(["dist"])// +++ 運(yùn)行前刪除dist目錄
    ]
}

現(xiàn)在無(wú)論運(yùn)行幾次構(gòu)建dist目錄下都是干凈的.

提取css

現(xiàn)在我們來(lái)將vue單文件中的css提取出來(lái)到一個(gè)多帶帶的css文件中.

webpack4中完成這個(gè)功能的插件是mini-css-extract-plugin.

安裝:

npm install mini-css-extract-plugin --save-dev

webpack.config.js:

const {join:pathJoin} = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// +++
module.exports = {
    entry:{
        app:"./src/index.js"
    },
    output:{
        filename:"[name].[hash]].js",
        path:pathJoin(__dirname,"./dist")
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader // +++
                    },
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"template.html",
            filename:"index.html"
        }),
        new MiniCssExtractPlugin({
            filename:"style.css" // 指定輸出的css文件名.
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(["dist"])
    ]
}

運(yùn)行我們的項(xiàng)目,現(xiàn)在dist目錄下已經(jīng)有一個(gè)style.css的文件了,而且htmlwebpackplugin自動(dòng)將style.css插入到了index.html中.

使用多個(gè)配置

考慮以下問(wèn)題:

開(kāi)發(fā)的時(shí)候我們希望打包速度快,有源代碼提示,有熱重載(本篇文章沒(méi)有涉獵)...

發(fā)布產(chǎn)品我們希望輸出的內(nèi)容不會(huì)被緩存,有代碼壓縮...

是時(shí)候使用多個(gè)配置了,一個(gè)用于開(kāi)發(fā)一個(gè)用于生產(chǎn).

但是我們還可以做的更好使用webpack-merge插件,可以將多個(gè)配置合成.

安裝webpack-merge:

npm install webpack-merge --save-dev

首先我們定義一個(gè)包含基本信息的webpack配置文件,這個(gè)文件被其他配置文件依賴.

webpack.common.js:

const {join:pathJoin} = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry:{
        app:"./src/index.js"
    },
    output:{
        filename:"[name].[hash].js",
        path:pathJoin(__dirname,"./dist")
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:"template.html",
            filename:"index.html"
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(["dist"])
    ]
}

可以看到這里定義的都是最基本的信息.

然后我們定義開(kāi)發(fā)配置并且在內(nèi)容使用webpack-merge插件和webpack.config.js進(jìn)行合并.

webpack.dev.js:

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
    mode: "development", // 不壓縮代碼,加快編譯速度
    devtool: "source-map", // 提供源碼映射文件調(diào)試使用
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /.css$/,
                use: ["vue-style-loader","css-loader"] // 使用vue-style-loader直接插入到style標(biāo)簽中
            }
        ]
    },
})

定義生產(chǎn)配置.

webpack.prod.js:

const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = merge(common,{
    mode:"production", // 壓縮代碼
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader // 提取css到外部文件中
                    },
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:"style.css"
        })
    ]
})

最后修改一下我們package.json中的快捷方式:

+++
"scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
},
+++

刪除之前的webpack.config.js.

完成后的目錄結(jié)構(gòu):

learnwebpack

dist

src

pages

app.vue

index.js

package.json

template.html

webpack.common.js

webpack.dev.js

webpack.prod.js

嘗試運(yùn)行npm run dev和npm run build吧.

簡(jiǎn)單的代碼分離

我們?cè)趇ndex.js中引用了Vue,如果你查看打包后的代碼你會(huì)發(fā)現(xiàn)vue本身會(huì)被打包到同一個(gè)文件中,如果我們有另外一個(gè)文件也引用了vue同樣的會(huì)被打包到該文件中.

顯然我們的代碼依賴vue,但是vue不應(yīng)該存在兩份,如果可以將vue多帶帶提取出來(lái)就好了,這個(gè)問(wèn)題就是要代碼分離.

在webpack4中刪除了原來(lái)的CommonsChunkPlugin插件,內(nèi)部集成的optimization.splitChunks選項(xiàng)可以直接進(jìn)行代碼分離.

修改webpack.dev.js:

const merge = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
    mode: "development",
    devtool: "source-map",
    optimization:{ // +++
        splitChunks:{ // +++
            chunks:"initial" // +++ initial(初始?jí)K)、async(按需加載塊)、all(全部塊)

        }
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"]
            },
            {
                test: /.css$/,
                use: ["vue-style-loader","css-loader"]
            }
        ]
    },
})

我們要做的就是將打包后寫(xiě)入到index.html的文件從目前的一個(gè)文件拆分成多個(gè),并且寫(xiě)入到index.html中.

也就是說(shuō)在入口處分離代碼.

運(yùn)行:

npm run dev

你會(huì)發(fā)現(xiàn)在dist目錄下多出了一個(gè)文件保存著vue,另外一個(gè)文件中保存著我們編寫(xiě)的代碼.

參考

vue部分:

https://cn.vuejs.org/v2/guide...
https://vue-loader.vuejs.org/zh/
https://www.npmjs.com/package...

webpack部分:

https://webpack.docschina.org...
https://github.com/webpack-co...
https://github.com/jantimon/h...

參考的其他教程:

https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
http://www.cnblogs.com/anani/...
https://blog.csdn.net/bubblin...

GPU云服務(wù)器云服務(wù)器簡(jiǎn)單java程序打包 vue入門(mén)教程簡(jiǎn)單入門(mén) linux簡(jiǎn)單入門(mén)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/108557.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

junbaor

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow原理

閱讀 1642·2023-04-25 18:19
#萬(wàn)圣節(jié)優(yōu)惠#Friendhosting：多國(guó)機(jī)房VPS全場(chǎng)5折優(yōu)惠，100Mbps不限流量，虛擬主

閱讀 2085·2021-10-26 09:48
使用Python控制手機(jī)

閱讀 1092·2021-10-09 09:44
博鰲云：香港站群服務(wù)器促銷(xiāo);E3/8G/240 GB SSD或1TB HDD/10M CN2 BGP

閱讀 1741·2021-09-09 11:35
兩個(gè)viewport的故事-桌面版(譯)

閱讀 3034·2019-08-30 15:54
我討厭你公事公辦的樣子

閱讀 2031·2019-08-30 11:26
移動(dòng)端優(yōu)先的flex三欄布局

閱讀 2295·2019-08-29 17:06
CSS偽類(lèi)的實(shí)例

閱讀 892·2019-08-29 16:38

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

webpack4+vue打包簡(jiǎn)單入門(mén)

相關(guān)文章

**為什么我不推薦你使用vue-cli創(chuàng)建腳手架？**

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

帶你了解webpack

發(fā)表評(píng)論

0條評(píng)論

junbaor

男|高級(jí)講師

TA的文章

tensorflow原理

#萬(wàn)圣節(jié)優(yōu)惠#Friendhosting：多國(guó)機(jī)房VPS全場(chǎng)5折優(yōu)惠，100Mbps不限流量，虛擬主

使用Python控制手機(jī)

博鰲云：香港站群服務(wù)器促銷(xiāo);E3/8G/240 GB SSD或1TB HDD/10M CN2 BGP

兩個(gè)viewport的故事-桌面版(譯)

我討厭你公事公辦的樣子

移動(dòng)端優(yōu)先的flex三欄布局

CSS偽類(lèi)的實(shí)例

最新活動(dòng)