準備工作

Webpack 5 對 Node.js 的版本要求最低是 10.13.0 (LTS)，因此，如果你還在使用舊版本的 Node.js，請升級它們。

升級 webpack 4 及其相關(guān)的插件/加載器

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

• 當(dāng)使用webpack >= 4時，升級到最新的webpack 5版本無需額外的操作。
• 如果您使用的 webpack 版本小于 4，請查看 webpack 4 遷移指南。

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

   3. 升級所有使用到的插件和加載器為最新的可用版本。

部分插件和加載器可能會有一個 beta 版本，必須使用它們才能與 webpack 5 兼容。 請確保在升級時閱讀每個插件/加載器的發(fā)布說明，因為最新版本可能只支持webpack 5，而在v4中會運行失敗。在這種情況下，建議升級到支持 webpack 4 的最新版本。

確保你的結(jié)構(gòu)沒有錯誤或警告

由于升級了webpack，webpack-cli，plugin以及l(fā)oader的版本，因此，可能會出現(xiàn)新的錯誤或警告。在編譯過程中請注意是否有廢棄警告。

你可以通過如下方式調(diào)整 webpack 來獲取堆棧信息中的廢棄警告，從中找到是哪個插件或者 loader 構(gòu)建的。

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

由于webpack 5移除了所有被廢棄的特性，因此，需要確保在構(gòu)建過程中沒有webpack的廢棄警告才能繼續(xù)。

請確保設(shè)置了模型

將模型設(shè)置為 ?production? 或 ?development? 以確保相關(guān)的默認值被設(shè)置。

升級廢棄的配置項

如有使用以下的配置項，請升級至最新的版本：

• ?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 的配置中添加如下選項，檢查一下構(gòu)建是否仍然正確的運行。

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

你必須在升級 webpack 5 的配置時，必須刪除這些選項。