Webpack 是一个强大的模块打包工具，它可以将多个模块打包成一个或多个文件，以便在浏览器端加载。Webpack 的版本迭代非常快，每一次更新都会带来一些新的功能和改进。本文主要介绍从 Webpack3 升级到 Webpack4 的流程，并详细说明升级后的变化。
升级前的准备
在开始升级之前，需要确保已经备份好了项目代码，以防不测。还需要检查当前项目所依赖的各个插件是否支持 Webpack4 版本，如果有不兼容的插件，则需要先升级这些插件。
升级步骤
第一步：安装 Webpack4
升级到 Webpack4 首先需要安装 Webpack4，可以使用以下命令进行安装：
npm install webpack@4.x.x --save-dev
第二步：升级配置文件
Webpack4 对配置文件做了一些重大改变，需要按照新的规则重新编写配置文件。主要的变化如下：
mode选项必须设置为"development"或"production"，默认值是"production"。entry和output的格式发生了变化，现在需要使用对象来配置多个入口和出口。UglifyJsPlugin和CommonsChunkPlugin插件已经被移除，现在需要使用optimization配置来代替它们。
下面是一个简单的 Webpack4 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- -------------
------ -
---- -----------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
------------- -
--------- -----
------------ -
------- ------
--
--
--第三步：升级依赖包
如果你使用了一些与 Webpack3 不兼容的插件或者依赖，需要将它们升级到支持 Webpack4 的版本。以下是一些常用的插件和它们对应的 Webpack4 版本：
html-webpack-plugin->html-webpack-plugin@4.x.xcss-loader->css-loader@3.x.xstyle-loader->style-loader@1.x.x
第四步：测试和调试
完成以上步骤后，需要进行测试和调试以确保项目可以顺利运行。可以使用 Webpack Dev Server 进行本地开发测试，命令如下：
npx webpack-dev-server --open
总结
Webpack4 对配置文件做了重大改变，但是这些变化都是为了提高打包速度和优化体验。在升级过程中，需要注意重新编写配置文件并升级依赖包，最终测试和调试确保项目可以顺利运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46475