webpack說復雜也不復雜。不復雜，核心概念不外乎是entry, output, loader, plugins。webpack4還新增了optimization選項，用于代碼分割和打包優化?，F在webpack官網文檔已經寫的挺棒了。而當你真正開始手寫一個webpack.config.js的時候，你就會發現，要記得東西有點兒多，還挺復雜的……

好啦，本文講的是手動編寫基于vue開發的webpack4配置，以下內容主要針對生產環境，開發環境的配置于之后奉上。

---

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

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

Entry:

entry可以是單個入口，也可以是多入口。

單個入口的寫法:

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

多個入口的寫法:

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

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

output

output里面的選項主要有(但遠不止以下):

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

loader

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

loader的寫法好有好幾種，loader一般放在module這個對象里的rules里面，現總結以下4種：

總結一下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相關的：postcss-plugin-px2rem，postcss-preset-env，postcss-sprites，autoprefixer
• webpack自帶的方法：webpack.ProvidePlugin等

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

---

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

先上目錄：

因為只寫一個注冊頁，筆者沒有用vue-cli，選擇手動擼一個vue的webpack配置。

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

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

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

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

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

---

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

上面兩張圖分別在loader和plugins里面用到，它們結合在一起可以把css樣式文件打包成一個css靜態資源文件，通過link標簽引入進html文檔中。

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

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

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

另外，runtimeChunk用來單獨打包壓縮運行時的webpack代碼。

至此，經過npm run build之后，代碼執行的入口文件為以下四個：

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

然后如下圖在plugins里面創建一個它的實例：

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

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

這時候就需要后端配合修改一下nginx的配置，增加gzip_static on。僅僅有gzip on是不行滴。

然后你再打開頁面就會發現vendor.bundle.js變成了63.4k。雖然還沒有達到我的要求，但是已經縮水一半以上了！

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

總結一下webpack的復雜性，總體來講就是要記得東西很多，有點“無厘頭，沒規律”，具體來說至少包含以下幾個方面：

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

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

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

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

---

鏈接文章：

https://segmentfault.com/a/1190000015725670

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。