清理配置

现在，让我们升级到 webpack 5：

• npm: npm 安装 webpack@latest
• 纱线：纱线添加webpack@latest

如果你之前在升级 webpack 4 时不能将任何插件或加载器升级到最新版本，现在不要忘了升级。

清理配置

• 请考虑 ​optimization.moduleIds​ 和 ​optimization.chunkIds​ 从你的webpack配置中移除。使用默认值会更合适，因为它们会在 production 模式 下支持长效缓存且可以在 development 模式下进行调试。
• 当webpack配置中使用了 ​[hash]​ 占位符时，请考虑将其改为 ​[contenthash]​ 。效果一致，但事实证明会更有效。
• 如果你使用了 Yarn 的 PnP 以及 ​pnp-webpack-plugin​ 插件，你可以将其从配置中移除，因为它已经被默认支持。
• 如果你使用了带有正确表达式参数的 ​IgnorePlugin​ ，现在已经支持传入一个 ​options​ 对象： ​new IgnorePlugin({ resourceRegExp: /regExp/ })​ 。
• 如果你使用了类似于 ​node.fs: 'empty'​ ，请使用 ​resolve.fallback.fs: false​ 代替。
• 如果你在 webpack 的 Node.js API 中使用了 ​watch: true​ ，请移去它。无需按编译器的提示设置，当执行 ​watch()​ 时为 ​true​ ，当执行 ​run()​ 时为 ​false​ 。
• 如果您确定了 ​rules​ ，则使用 ​raw-loader​ ，​ url-loader​ 或 ​file-loader​ 来加载资源，请使用 资源模板 替代，因为它们可能会在不久的将来被淘洗。
• 如果你将 ​target​ 标记设置为函数，则应将其更新为 ​false​ ，然后在插件中选择使用该函数。具体示例如下：

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

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

如果通过 import 使用了 WebAssembly，应遵循以下两点：

• 在配置增加 ​experiments.syncWebAssembly: true​ 配置，以启动废弃提示，获得在webpack 4中的一致为。
• 在成功升级至 webpack 5 以后，应将 ​experiments​ 的值改为 ​experiments：{ asyncWebAssembly: true }​ 以使用最新规范的 WASM。

重新考虑 ​optimization.splitChunks​ 的配置：

• 推荐使用默认配置或使用优化。​splitChunks: { chunks: 'all' }​ 配置。
• 当使用自定义配置时，请删除 ​name: false​ ，并将 ​name: string | function​ 替换为 ​idHint: string | function​ 。
• 使用 ​optimization.splitChunks.cacheGroups: { default: false, vendors: false }​ 配置可以关闭默认值。但我们不推荐这样做，如果你需要在webpack 5中获得与之相同的效果：请将配置更改为 ​optimization.splitChunks.cacheGroups: { default: false, defaultVendors: false }​ 。

考虑迁移的默认值：

• 当设置 ​entry: './src/index.js'​ 时，你可以省略它，此为默认值。
• 当设置 ​output.path: path.resolve(__dirname, 'dist')​ 时：你可以省略它，此为默认值。
• 当设置 ​output.filename: '[name].js'​ 时：你可以省略它，此为默认值。

需要旧版浏览器的支持？比如IE 11？

• 如果你在项目中启用了 browserslist ，webpack 5 将会重新使用你的 ​browserslist​ 配置来决定运行时的代码风格。

       只需要确保：

          1. 将目标设置为browserslist，或者转移者移除target配置，webpack会自动将其置为 browserslist。

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

• 如果未使用 ​browserslist​ ，webpack 的运行时代码将默认使用 ES2015 语言法（例如，箭头数）来构建一个简洁的 bundle。如果你构建构建的目标环境并不支持 ES2015 的语言（如 IE 11），你需要设置 ​target:['web', 'es5']​ 以使用 ES5 的语言。
• 对于Node.js环境来说，构建中引入了对Node.js版本的支持，webpack会自动找到对应用版本支持的语言，例如，​target: 'node8.6'​ 。