准备工作

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

升级 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 4 的配置中添加如下选项，检查一下构建是否仍然正确的运行。

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

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