准备工作

Webpack 5 对 Node.js 的版本要求最低是 10.13.0 (LTS)，因此，如果你还在使用旧版本的 Node.js，请升级它们。

升级 webpack 4 及其相关的插件/加载器

1. 升级 webpack 4 至最新的可用版本。

• 当使用webpack >= 4时，升级到最新的webpack 5版本无需额外的操作。
• 如果您使用的 webpack 版本小于 4，请查看 webpack 4 迁移指南。

   2. 升级 webpack-cli 到最新的可用版本（如已使用的情况下）

   3. 升级所有使用到的插件和加载器为最新的可用版本。

部分插件和加载器可能会有一个 beta 版本，必须使用它们才能与 webpack 5 兼容。 请确保在升级时阅读每个插件/加载器的发布说明，因为最新版本可能只支持webpack 5，而在v4中会运行失败。在这种情况下，建议升级到支持 webpack 4 的最新版本。

确保你的结构没有错误或警告

由于升级了webpack，webpack-cli，plugin以及loader的版本，因此，可能会出现新的错误或警告。在编译过程中请注意是否有废弃警告。

你可以通过如下方式调整 webpack 来获取堆栈信息中的废弃警告，从中找到是哪个插件或者 loader 构建的。

node --trace-deprecation node_modules/webpack/bin/webpack.js

由于webpack 5移除了所有被废弃的特性，因此，需要确保在构建过程中没有webpack的废弃警告才能继续。

请确保设置了模型

将模型设置为 ​production​ 或 ​development​ 以确保相关的默认值被设置。

升级废弃的配置项

如有使用以下的配置项，请升级至最新的版本：

• ​optimization.hashedModuleIds: true​ → ​optimization.moduleIds: 'hashed'​
• ​optimization.namedChunks: true​ → ​optimization.chunkIds: 'named'​
• ​optimization.namedModules: true​ → ​optimization.moduleIds: 'named'​
• ​NamedModulesPlugin​ → ​optimization.moduleIds: 'named'​
• ​NamedChunksPlugin​ → ​optimization.chunkIds: 'named'​
• ​HashedModuleIdsPlugin​ → ​optimization.moduleIds: 'hashed'​
• ​optimization.noEmitOnErrors: false​ → ​optimization.emitOnErrors: true​
• ​optimization.occurrenceOrder: true​ → ​optimization: { chunkIds: 'total-size', moduleIds: 'size' }​
• optimization.splitChunks.cacheGroups.vendors​ → ​optimization.splitChunks.cacheGroups.defaultVendors​
• ​optimization.splitChunks.cacheGroups.test(module, chunks) ​→ ​optimization.splitChunks.cacheGroups.test(module, { chunkGraph, moduleGraph })​
• ​Compilation.entries​ → ​Compilation.entryDependencies​
• ​serve​ → ​serve​ 已被移除，推荐使用 ​DevServer​
• ​Rule.query​（从 v3 开始被移除）→ ​Rule.options​/​UseEntry.options​
• ​Rule.loaders​ → ​Rule.use​

测试 webpack 5 兼具性

尝试在 webpack 4 的配置中添加如下选项，检查一下构建是否仍然正确的运行。

module.exports = {
  // ...
  node: {
    Buffer: false,
    process: false,
  },
};

你必须在升级 webpack 5 的配置时，必须删除这些选项。