webpack說復(fù)雜也不復(fù)雜。不復(fù)雜，核心概念不外乎是entry, output, loader, plugins。webpack4還新增了optimization選項(xiàng)，用于代碼分割和打包優(yōu)化。現(xiàn)在webpack官網(wǎng)文檔已經(jīng)寫的挺棒了。而當(dāng)你真正開始手寫一個(gè)webpack.config.js的時(shí)候，你就會發(fā)現(xiàn)，要記得東西有點(diǎn)兒多，還挺復(fù)雜的……

好啦，本文講的是手動編寫基于vue開發(fā)的webpack4配置，以下內(nèi)容主要針對生產(chǎn)環(huán)境，開發(fā)環(huán)境的配置于之后奉上。

---

webpack的核心概念包含以下幾個(gè)，要牢記：

• entry - webpack打包的入口，并非代碼執(zhí)行的入口；
• output - webpack打包后生成的靜態(tài)資源文件，它是最終會被html引用的文件；
• loader - 對于非js的模塊(或說文件)，轉(zhuǎn)化成webpack能夠處理的js文件；對于還要進(jìn)一步處理的js文件進(jìn)行加工處理；
• plugins - 參與到整個(gè)webpack打包的過程(webpack打包的各個(gè)生命周期)，可與loader結(jié)合使用，提供相應(yīng)/輔助的功能。

Entry:

entry可以是單個(gè)入口，也可以是多入口。

單個(gè)入口的寫法:

entry: 'a.js' 或 ['a.js', 'b.js']

多個(gè)入口的寫法:

entry: { a: 'a.js', b: 'b.js'}

webpack會以你給的entry為入口，根據(jù)dependency graph，挨個(gè)打包，結(jié)合其他相應(yīng)的設(shè)置，最終輸出成頁面要引用的靜態(tài)資源文件。注意了，這里提到的“結(jié)合其他相應(yīng)的設(shè)置”，很可能是不止一處的設(shè)置。

output

output里面的選項(xiàng)主要有(但遠(yuǎn)不止以下):

• filename: '[name].[hash].bundle.js' // [name]和entry里面的name對應(yīng)
• path: path.resolve(__dirname, 'dist') // 指最終打包生成的目錄
• publicPath: 可以是'./dist/' 或 '/' 或 cdn地址 // 指外部訪問靜態(tài)資源文件的路徑
• chunkFilename: '[name].chunk.js' // 指用webpack.ensure或import().then()動態(tài)加載的文件

loader

loader就是把模塊轉(zhuǎn)換成webpack能夠處理的js文件(如css,scss,vue等非js模塊)，或者對js模塊本身進(jìn)行再加工(如編譯es6語法等)。

loader的寫法好有好幾種，loader一般放在module這個(gè)對象里的rules里面，現(xiàn)總結(jié)以下4種：

總結(jié)一下loader的常用四種寫法：

use: [xxx, xxx]use: [{loader: XXX}, {loader: XXX}]use: [{ loader: XXX, options: {}}, 'XXX']loader: [XXX, XXX] 或 loader:XXX, options: {XXX}

常用的loader有:

• 處理樣式的：style-loader,css-loader,postcss-loader,sass-loader,less-loder
• 處理es6的：babel-loader(要連同babel-core, babel-preset-env)一起用
• 處理圖片的：file-loader, url-loader, image-webpack-loader

Plugins

常用的plugin有：

• 壓縮js：uglifyjs-webpack-plugin
• 合并&壓縮css： mini-css-extract-plugin，optimize-css-assets-webpack-plugin
• 清除目錄：clean-webpack-plugin
• 生成html：html-webpack-plugin
• postcss相關(guān)的：postcss-plugin-px2rem，postcss-preset-env，postcss-sprites，autoprefixer
• webpack自帶的方法：webpack.ProvidePlugin等

是不是開始覺得要記得東西很多啊？蛤蛤蛤蛤蛤蛤，不要急，要記得東西遠(yuǎn)不止這些……

---

以上講的都是些概念和基本配置，結(jié)合起來怎么用呢？

先上目錄：

因?yàn)橹粚懸粋€(gè)注冊頁，筆者沒有用vue-cli，選擇手動擼一個(gè)vue的webpack配置。

打包編譯vue文件，需要用到vue-loader，樣式需要用vue-style-loader，那么怎么辦呢？一定記住安裝vue-template-compiler，雖然它只存在于你的node_modules文件夾中，但是vue-loader需要用到它，所以務(wù)必記住安裝。

另外，在loader中設(shè)置了vue-loader之外，還得設(shè)置一個(gè)變量const { VueLoaderPlugin } = require('vue-loader')，并且在plugins里面創(chuàng)建一個(gè)它的實(shí)例才行，即new VueLoaderPlugin()。

ps. 系不系感覺復(fù)雜了？我也布吉島為神馬這些配置要分散在不同地方進(jìn)行配置，這就加劇了webpack上手的難度。。。。

在我們書寫配置的時(shí)候，一定要清楚自己想要webpack幫助你達(dá)到什么目的，以此來選擇需要的loader和plugin以及其他輔助工具。

除了上面講到的轉(zhuǎn)化vue模塊外，在生產(chǎn)環(huán)境下，我需要webpack幫助我的主要是打包、壓縮js,css,images，自動生成html文件，以及每次打包前先刪除已存在的dist目錄。所以上圖中所引入的模塊就是能完成這些功能的基本工具。

---

這個(gè)是利用你的template文件生成最終的html文件，并對html文件進(jìn)行打包壓縮的，它會把html文件打包壓縮成如下：

上面兩張圖分別在loader和plugins里面用到，它們結(jié)合在一起可以把css樣式文件打包成一個(gè)css靜態(tài)資源文件，通過link標(biāo)簽引入進(jìn)html文檔中。

在webpack4中，打包壓縮JS和CSS都可以在optimization這個(gè)對象里進(jìn)行。如果不寫minimize，則mode為production時(shí)webpack會自動開啟uglifyjs的操作。倘若寫了minimize，里面卻不配置uglifyjs，則這個(gè)自動的操作會被取消。

它們分別會讓你的js和css文件打包壓縮成如下：

另外webpack最顯著的特點(diǎn)，這也是webpack創(chuàng)始人打造它的初衷，就是code splitting！既然如此，我們當(dāng)然要發(fā)揮webpack這個(gè)特點(diǎn)，幫助我們優(yōu)化！注意哦，代碼分割是內(nèi)置在webpack里面的方法。在webpack4中，它在optimization里面配置，也就是取代了之前的commonsChunkPlugin這個(gè)插件。如下：

另外，runtimeChunk用來單獨(dú)打包壓縮運(yùn)行時(shí)的webpack代碼。

至此，經(jīng)過npm run build之后，代碼執(zhí)行的入口文件為以下四個(gè)：

再讓我們來分析一下打包后的文件大小，總之我打包后vendor變得很大，即便uglify了，也有188k。這可不行！這時(shí)候請記住plugin: compression-webpack-plugin。

然后如下圖在plugins里面創(chuàng)建一個(gè)它的實(shí)例：

這樣一來，打包后你生成的文件就會包含一個(gè)vendor.bundle.js.gz二進(jìn)制格式的壓縮文件。如下圖：

很開熏是不是？但是我們打包后dist/index.html中引用的是vendor.bundle.js，并不是這個(gè).gz的壓縮文件，怎么辦？

這時(shí)候就需要后端配合修改一下nginx的配置，增加gzip_static on。僅僅有g(shù)zip on是不行滴。

然后你再打開頁面就會發(fā)現(xiàn)vendor.bundle.js變成了63.4k。雖然還沒有達(dá)到我的要求，但是已經(jīng)縮水一半以上了！

補(bǔ)充說一下webpack4“動態(tài)引入”的不同，如果要用import().then()這個(gè)動態(tài)引入方法，需要安裝babel-plugin-dynamic-import-webpack這個(gè)插件才行。

總結(jié)一下webpack的復(fù)雜性，總體來講就是要記得東西很多，有點(diǎn)“無厘頭，沒規(guī)律”，具體來說至少包含以下幾個(gè)方面：

有些功能用loader就完事了，可有些還要配合著plugins去寫。有些loader本身要配置plugins，有些loader需要到外面大plugins對象里進(jìn)行設(shè)置。沒有統(tǒng)一的規(guī)律遵循，比較雜亂；

不同loader和plugins配置項(xiàng)可以很多，不同版本也不一樣(希望以后版本更迭的成本小一些，給開發(fā)者多一些溫油)；

像babel這樣的，要注意不同版本的差別，否則會報(bào)錯(cuò)。babel-loader, babel-core, babel-preset, babel-polyfill一定要對應(yīng)著來。并且用了babel-loader并不久完事了，要去設(shè)置對應(yīng)的presets告訴babel要把你的es6編譯成啥樣的規(guī)范，可以寫在options里，也可以在根目錄設(shè)置.babelrc。另外要編譯es方法和函數(shù)還要用到polyfill，如果是開發(fā)框架則要用另一個(gè)babel-plugin--transform-runtime --save-dev和babel-runtime --save。

總之要記的很多就是了。。。

---

鏈接文章：

https://segmentfault.com/a/1190000015725670

總結(jié)

以上是生活随笔為你收集整理的vsc写vue生成基本代码快捷键_基于vue2.X的webpack基本配置，教你手动撸一个webpack4的配置...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。