清理配置

現(xiàn)在，讓我們升級(jí)到 webpack 5：

• npm: npm 安裝 webpack@latest
• 紗線：紗線添加webpack@latest

如果你之前在升級(jí) webpack 4 時(shí)不能將任何插件或加載器升級(jí)到最新版本，現(xiàn)在不要忘了升級(jí)。

清理配置

• 請(qǐng)考慮 ?optimization.moduleIds? 和 ?optimization.chunkIds? 從你的webpack配置中移除。使用默認(rèn)值會(huì)更合適，因?yàn)樗鼈儠?huì)在 production 模式 下支持長(zhǎng)效緩存且可以在 development 模式下進(jìn)行調(diào)試。
• 當(dāng)webpack配置中使用了 ?[hash]? 占位符時(shí)，請(qǐng)考慮將其改為 ?[contenthash]? 。效果一致，但事實(shí)證明會(huì)更有效。
• 如果你使用了 Yarn 的 PnP 以及 ?pnp-webpack-plugin? 插件，你可以將其從配置中移除，因?yàn)樗呀?jīng)被默認(rèn)支持。
• 如果你使用了帶有正確表達(dá)式參數(shù)的 ?IgnorePlugin? ，現(xiàn)在已經(jīng)支持傳入一個(gè) ?options? 對(duì)象： ?new IgnorePlugin({ resourceRegExp: /regExp/ })? 。
• 如果你使用了類似于 ?node.fs: 'empty'? ，請(qǐng)使用 ?resolve.fallback.fs: false? 代替。
• 如果你在 webpack 的 Node.js API 中使用了 ?watch: true? ，請(qǐng)移去它。無需按編譯器的提示設(shè)置，當(dāng)執(zhí)行 ?watch()? 時(shí)為 ?true? ，當(dāng)執(zhí)行 ?run()? 時(shí)為 ?false? 。
• 如果您確定了 ?rules? ，則使用 ?raw-loader? ，? url-loader? 或 ?file-loader? 來加載資源，請(qǐng)使用 資源模板 替代，因?yàn)樗鼈兛赡軙?huì)在不久的將來被淘洗。
• 如果你將 ?target? 標(biāo)記設(shè)置為函數(shù)，則應(yīng)將其更新為 ?false? ，然后在插件中選擇使用該函數(shù)。具體示例如下：

// for webpack 4
{
    target: WebExtensionTarget(nodeConfig)
}

// for webpack 5
{
    target: false,
    plugins: [
        WebExtensionTarget(nodeConfig)
    ]
}

如果通過 import 使用了 WebAssembly，應(yīng)遵循以下兩點(diǎn)：

• 在配置增加 ?experiments.syncWebAssembly: true? 配置，以啟動(dòng)廢棄提示，獲得在webpack 4中的一致為。
• 在成功升級(jí)至 webpack 5 以后，應(yīng)將 ?experiments? 的值改為 ?experiments：{ asyncWebAssembly: true }? 以使用最新規(guī)范的 WASM。

重新考慮 ?optimization.splitChunks? 的配置：

• 推薦使用默認(rèn)配置或使用優(yōu)化。?splitChunks: { chunks: 'all' }? 配置。
• 當(dāng)使用自定義配置時(shí)，請(qǐng)刪除 ?name: false? ，并將 ?name: string | function? 替換為 ?idHint: string | function? 。
• 使用 ?optimization.splitChunks.cacheGroups: { default: false, vendors: false }? 配置可以關(guān)閉默認(rèn)值。但我們不推薦這樣做，如果你需要在webpack 5中獲得與之相同的效果：請(qǐng)將配置更改為 ?optimization.splitChunks.cacheGroups: { default: false, defaultVendors: false }? 。

考慮遷移的默認(rèn)值：

• 當(dāng)設(shè)置 ?entry: './src/index.js'? 時(shí)，你可以省略它，此為默認(rèn)值。
• 當(dāng)設(shè)置 ?output.path: path.resolve(__dirname, 'dist')? 時(shí)：你可以省略它，此為默認(rèn)值。
• 當(dāng)設(shè)置 ?output.filename: '[name].js'? 時(shí)：你可以省略它，此為默認(rèn)值。

需要舊版瀏覽器的支持？比如IE 11？

• 如果你在項(xiàng)目中啟用了 browserslist ，webpack 5 將會(huì)重新使用你的 ?browserslist? 配置來決定運(yùn)行時(shí)的代碼風(fēng)格。

       只需要確保：

          1. 將目標(biāo)設(shè)置為browserslist，或者轉(zhuǎn)移者移除target配置，webpack會(huì)自動(dòng)將其置為 browserslist。

          2. 在你的 ?browserslist? 配置中添加? IE 11? 。

• 如果未使用 ?browserslist? ，webpack 的運(yùn)行時(shí)代碼將默認(rèn)使用 ES2015 語言法（例如，箭頭數(shù)）來構(gòu)建一個(gè)簡(jiǎn)潔的 bundle。如果你構(gòu)建構(gòu)建的目標(biāo)環(huán)境并不支持 ES2015 的語言（如 IE 11），你需要設(shè)置 ?target:['web', 'es5']? 以使用 ES5 的語言。
• 對(duì)于Node.js環(huán)境來說，構(gòu)建中引入了對(duì)Node.js版本的支持，webpack會(huì)自動(dòng)找到對(duì)應(yīng)用版本支持的語言，例如，?target: 'node8.6'? 。