這就是我們下節要說的內容模式設置。

★★ 注意：入口默認為 ./src 如果缺少此文件夾會報錯！

> webpack --mode production
ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\workspace\github\Webpack-Example'

3.2 模式設置

以往的項目使用 webpack3 腳手架生成項目初始模板都會有兩個甚至三個配置文件，比如
webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js 而現在可以做到一個配置文件都不需要，直接在啟動命令中傳入參數 --mode development | production 達到區分不同模式的效果。

接下來修改 package.json 設置不同的模式：

 "scripts": {
 "dev": "webpack --mode development",
 "build": "webpack --mode production"
 },

重新執行 npm run dev 或 npm run build 即可看到不同的打包結果：

我們可以看到兩種模式的結果完全不同，下面我們會更深入的按照我們真實的需求來講解一些常用配置。

接下來這個配置是最常用到的，我們使用 webpack 的主要目的之一就是為了更好的支撐前段模塊化的能力，既然需要模塊化當然少不了代碼分割，目前代碼分割有以下幾種：

1.  通過 entry 分割不同入口，常用于多頁應用；
2.  通過 CommonsChunkPlugin 插件來分割不同功能模塊；
3.  通過動態 import 來分割。

下面我們主要講解 webpack 4.0.0-beta.0 版本的重大變化刪除了 CommonsChunkPlugin 插件。

3.3 刪除 CommonsChunkPlugin

webpack 4.0.0-beta.0刪除了 CommonsChunkPlugin，以支持兩個新的選項（optimization.splitChunks 和 optimization.runtimeChunk）。

從webpack 4.0.0-beta.0 開始分割 Chunk 將不在使用 CommonsChunkPlugin 插件，而是使用 optimization 配置項，具體的實現原理可以參考 CommonsChunkPlugin。

由于還沒有正式官方文檔出來，以下是我們通過實踐出的 optimization 配置方法：
其中用到了新增的 splitChunks 屬性，此屬性看字面意思就明白是分割代碼塊的選項，其下可配置項已在下面示例代碼中列出（有興趣的朋友可以自行實踐）：

entry: {
 vendor: ['lodash']
},
 
...
 
optimization: {
 splitChunks: {
 chunks: "initial", // 必須三選一： "initial" | "all"(默認就是all) | "async" 
 minSize: 0, // 最小尺寸，默認0
 minChunks: 1, // 最小 chunk ，默認1
 maxAsyncRequests: 1, // 最大異步請求數， 默認1
 maxInitialRequests : 1, // 最大初始化請求書，默認1
 name: function(){}, // 名稱，此選項可接收 function
 cacheGroups:{ // 這里開始設置緩存的 chunks
 priority: 0, // 緩存組優先級
 vendor: { // key 為entry中定義的 入口名稱
 chunks: "initial", // 必須三選一： "initial" | "all" | "async"(默認就是異步) 
 test: /react|lodash/, // 正則規則驗證，如果符合就提取 chunk
 name: "vendor", // 要緩存的 分隔出來的 chunk 名稱 
 minSize: 0,
 minChunks: 1,
 enforce: true,
 maxAsyncRequests: 1, // 最大異步請求數， 默認1
 maxInitialRequests : 1, // 最大初始化請求書，默認1
 reuseExistingChunk: true // 可設置是否重用該chunk（查看源碼沒有發現默認值）
 }
 }
 }
 },

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com