Webpack 是前端工程化中使用最广泛的打包工具，随着版本的不断更新，Webpack 5.0 正式版也于 2020 年 10 月发布。本文主要介绍如何将已有的项目从 Webpack 4.x 升级到 Webpack 5.0，以及升级过程中需要注意的一些事项。
升级前的准备
在升级之前，我们需要做一些准备工作，以避免出现一些不必要的问题。
确认 Node.js 版本
Webpack 5.0 要求 Node.js 版本必须大于等于 10.13.0，因此在升级之前，需要确认 Node.js 的版本是否符合要求。
确认依赖包版本
在升级之前，需要确认已有的依赖包版本是否与 Webpack 5.0 兼容。可以通过官方文档或者 NPM 官网查看依赖包的版本信息，以确保升级过程中不会出现依赖包不兼容的问题。
备份项目
在升级之前，需要备份项目，以防止升级过程中出现问题导致项目无法正常运行。
升级过程
安装 Webpack 5.0
首先，我们需要安装 Webpack 5.0。可以通过以下命令来安装：
npm install webpack@5 --save-dev
更新配置文件
在升级之前，需要将 Webpack 配置文件进行更新，以适应 Webpack 5.0 的新特性。
更新模式配置
Webpack 5.0 引入了新的模式配置选项，包括 production、development、none 三种模式。在配置文件中，可以通过设置 mode 属性来指定使用哪种模式。例如：
module.exports = {
mode: 'production',
// other configurations
}更新 devtool 配置
在 Webpack 5.0 中，devtool 配置选项也进行了更新。现在，可以使用 eval、eval-cheap-source-map、eval-source-map、source-map、cheap-source-map、cheap-module-source-map、inline-cheap-source-map、inline-cheap-module-source-map、hidden-source-map、nosources-source-map 等多种选项。例如：
module.exports = {
devtool: 'source-map',
// other configurations
}更新 resolve 配置
在 Webpack 5.0 中，resolve 配置选项也进行了更新。现在，可以使用 symlinks、cacheWithContext、aliasFields、mainFields、conditions、exportsFields、importsFields 等多种选项。例如：
-- -------------------- ---- -------
-------------- - -
-------- -
----------- ------- --------
------ -
---- ----------------------- -------
--
--
-- ----- --------------
-更新 optimization 配置
在 Webpack 5.0 中，optimization 配置选项也进行了更新。现在，可以使用 minimize、minimizer、splitChunks、moduleIds、chunkIds、usedExports、sideEffects 等多种选项。例如：
-- -------------------- ---- -------
-------------- - -
------------- -
--------- -----
---------- -
--- --------------
---------------- ------
-------------- -
--------- -
------------- -----
--
--
---
--
------------ -
------- ------
--
--
-- ----- --------------
-更新 Loader
在升级到 Webpack 5.0 后，可能需要更新一些 Loader，以适应新的 Webpack 版本。例如，babel-loader 需要更新到 @babel/core 的最新版本。
更新插件
在升级到 Webpack 5.0 后，可能需要更新一些插件，以适应新的 Webpack 版本。例如，html-webpack-plugin 需要更新到最新版本。
注意事项
在升级到 Webpack 5.0 后，需要注意一些事项，以确保项目能够正常运行。
避免使用内部 API
Webpack 5.0 引入了一些新的内部 API，但是这些 API 可能会在未来版本中进行更改或者删除。因此，建议避免使用内部 API，以免出现兼容性问题。
避免使用废弃 API
在 Webpack 5.0 中，一些 API 已经被标记为废弃，建议不要再使用这些 API，以免出现兼容性问题。
避免使用未经测试的 Loader 和插件
在升级到 Webpack 5.0 后，一些 Loader 和插件可能还没有进行充分的测试，因此建议不要轻易使用未经测试的 Loader 和插件，以免出现问题。
示例代码
下面是一个简单的 Webpack 5.0 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - ---------------------------------
----- ----------------- - -------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -------------
-------- -
----------- ------- --------
------ -
---- ----------------------- -------
--
--
------------- -
--------- -----
---------- -
--- --------------
---------------- ------
-------------- -
--------- -
------------- -----
--
--
---
--
------------ -
------- ------
--
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
-
----- ---------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- -------------------
---
--
--结论
升级到 Webpack 5.0 需要做一些准备工作，并更新 Webpack 配置文件、Loader 和插件等。在升级过程中需要注意一些事项，以确保项目能够正常运行。同时，也需要关注 Webpack 5.0 的新特性，以便更好地使用这个工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675ae2274b9d41201abcd8c0