這就是我們下節(jié)要說的內(nèi)容模式設(shè)置。

★★ 注意：入口默認(rèn)為 ./src 如果缺少此文件夾會(huì)報(bào)錯(cuò)！

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

3.2 模式設(shè)置

以往的項(xiàng)目使用 webpack3 腳手架生成項(xiàng)目初始模板都會(huì)有兩個(gè)甚至三個(gè)配置文件，比如
webpack.base.conf.js、webpack.prod.conf.js、webpack.dev.conf.js 而現(xiàn)在可以做到一個(gè)配置文件都不需要，直接在啟動(dòng)命令中傳入?yún)?shù) --mode development | production 達(dá)到區(qū)分不同模式的效果。

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

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

重新執(zhí)行 npm run dev 或 npm run build 即可看到不同的打包結(jié)果：

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

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

1.  通過 entry 分割不同入口，常用于多頁應(yīng)用；
2.  通過 CommonsChunkPlugin 插件來分割不同功能模塊；
3.  通過動(dòng)態(tài) import 來分割。

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

3.3 刪除 CommonsChunkPlugin

webpack 4.0.0-beta.0刪除了 CommonsChunkPlugin，以支持兩個(gè)新的選項(xiàng)（optimization.splitChunks 和 optimization.runtimeChunk）。

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com