前言
Webpack 4 是目前最新的 Webpack 版本，它与 Webpack 3 相比，有着更好的性能和更友好的配置体验。在实际开发中，我们有时需要将现有的项目从 Webpack 3 升级到 Webpack 4。本文将具体介绍如何将 Webpack 3 升级为 Webpack 4，并提供一些注意事项和示例代码。
升级前的准备工作
在升级前，我们需要保证当前项目中的依赖包都是最新的版本。我们可以先执行以下命令来更新依赖：
npm update
然后，我们需要备份当前项目的 Webpack 配置文件，以便将来需要恢复。
升级步骤
1. 升级 Webpack 与 Webpack CLI
在升级之前，我们需要先卸载当前项目中的 Webpack 和 Webpack CLI：
npm uninstall webpack webpack-cli -D
然后，我们安装最新版本的 Webpack 和 Webpack CLI：
npm install webpack webpack-cli -D
2. 升级 Loader 和 Plugin
在升级 Webpack 之后，我们需要检查项目中使用的 Loader 和 Plugin 是否需要升级。我们可以通过查看官方文档或者 Webpack 官方迁移指南 来确定需要升级的 Loader 和 Plugin。
3. 升级 Webpack 配置文件
在升级 Webpack 之后，我们需要修改 Webpack 配置文件，以适应新的版本。以下是一些需要注意的地方：
3.1 模式（Mode）
Webpack 4 的主要特性之一就是模式（Mode）。在原来的模式之外，Webpack 4 新增了两个模式：production 和 development。我们需要在配置文件中设置模式，以便 Webpack 根据不同的模式做出相应的优化。例如：
module.exports = {
mode: "production"
}3.2 入口（Entry）
在 Webpack 3 中，我们使用 entry 属性来指定入口文件。在 Webpack 4 中，我们可以选择使用 entry 属性，也可以使用新的 optimization 属性中的 entry 选项。例如：
-- -------------------- ---- -------
-------------- - -
-- ------- -
------ -----------------
-- ------- -
------------- -
------ ----------------
-
-3.3 输出（Output）
在 Webpack 3 中，我们使用 output 属性来指定输出目录和文件名。在 Webpack 4 中，我们需要在 output 属性中设置 filename 和 path 选项。例如：
-- -------------------- ---- -------
-------------- - -
-- ------- -
------- -
----- --------- - --------
--------- -----------
--
-- ------- -
------- -
--------- ------------
----- --------- - -------
-
-3.4 插件（Plugin）
在 Webpack 4 中，有一些插件被弃用或者重命名了。我们需要根据需要将插件升级或者替换为新的插件。例如：
-- -------------------- ---- ------- -- ------- - ----- ----------------- - --------------------------------------- -------------- - - -------- ---- -------------------------------- - -- ------- - ----- -------------------- - ----------------------------------- -------------- - - -------- ---- ---------------------- --------- ------------ --- -
3.5 Loader
在 Webpack 4 中，我们可以使用 oneOf 选项来优化 Loader 的使用。使用 oneOf 选项可以避免对所有文件都执行相同的 Loader，从而提高构建速度。例如：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
------ -
-
----- ----------
---- -
------- -----------
-
--
-
----- ----------
---- -
----------------------------
-------------
-
------- --------------
-------- - --------------- --------------- -
-
-
-
-
-
-
-
-后续操作
完成上述步骤之后，我们需要重新运行 Webpack，检查项目是否能够成功构建。如果构建失败，我们需要根据报错信息逐一排查问题。
总结
将 Webpack 3 升级为 Webpack 4 是一个比较复杂的过程，在升级时，我们需要注意检查依赖包、插件、Loader 的版本，同时需要修改 Webpack 配置文件中相关的配置项。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0c65c83d39b4881520040