Webpack 是现代前端开发中最重要的工具之一，它可以将多个 JavaScript 文件打包成一个文件，并且支持使用加载器解析、编译、压缩和优化其他类型的文件，比如 CSS、图片和字体等。Webpack3 是目前最稳定和广泛使用的版本，但是随着 Webpack5 的发布，Webpack3 的维护也逐渐停止。所以，我们有必要将我们的项目升级到 Webpack4，并且使用 Webpack5 的新特性和性能优化。
在这篇文章中，我们将分享升级 Webpack3 到 Webpack4 的踩坑记录和经验，并且提供一些有关 Webpack4 的设计原则、插件、优化和最佳实践的指导意义。
Webpack4 改动
Webpack4 同样支持多入口，但是在配置上有所不同。之前我们使用了 webpack.optimize.splitChunks，在新版的 Webpack 中，这个插件被集成到了核心代码中，它扩展了原来的 CommonChunksPlugin，提高了应用程序的效率。除此之外，还有一些重要的更新和改进：
- 移除了一些插件和加载器，例如 UglifyJsPlugin 和 CommonsChunkPlugin
- 支持 Webpack 5 中的 zero configuration
- 引入了 development、production 和 none 三种模式
- 优化了性能，使其更快、更小和更有弹性
- 等等
升级 Webpack3 到 Webpack4
在升级 Webpack3 到 Webpack4 的过程中，我们需要注意以下一些变化：
升级 Webpack 和 Webpack CLI
首先，我们需要升级 Webpack 和 Webpack CLI 到最新的版本，使用以下命令来升级：
npm update webpack webpack-cli
更改配置文件
接下来，需要更改项目的 Webpack 配置，主要有以下几个方面：
mode
Webpack4 引入了 mode 参数，它指定 webpack 的模式，有 none、development、production 三种模式。我们需要在我们的配置文件中设置模式，例如：
-------------- - - ----- ------------- ----- --
optimization
Webpack4 提供了一个优化属性，它对分离和压缩 bundle 提供了更好的优化方式。我们需要在我们的配置文件中增加优化属性，例如：
-------------- - -
-----
------------- -
------------ -
------- -----
--
--------- -----
---------- -
--- --------------
--------- -----
------ -----
---------- ----
--
-
--
-----
--插件变更
Webpack4 移除了一些过时的插件和加载器，例如 UglifyJsPlugin，替换为了 TerserPlugin。同时，CommonsChunkPlugin 和 ExtractTextPlugin 也不再被支持了。取而代之的是 optimization.splitChunks 和 MiniCssExtractPlugin 等等。我们需要将我们的配置文件相应做出改变。
集成 mode 区分生产环境
当我们打包不同的环境时，我们需要指定不同的区分点。使用 Webpack4，可以通过查看 process.env.NODE_ENV 来判断当前是生产环境或开发环境。我们可以在配置文件中加入 NODE_ENV 这个变量，来获取不同的配置文件和参数等。例如，在使用 WebpackDevServer 时，我们可以这样写：
NODE_ENV=development webpack-dev-server
这样开启的 webpack-dev-server 环境会得到相应的声明和特性，在生产环境下则与之前一样。
总结
Webpack4 带来了许多新特性和优化，同时也造成了一些混乱和困扰。在升级的过程中，我们需要仔细检查每一个细节，同时需要对新的特性和设计原则有一个清晰的理解，才能更好地使用 Webpack4。
希望这篇文章对你在升级 Webpack3 到 Webpack4 的过程中有所帮助。下面是示例代码：
----- ---- - ----------------
----- -------------------- - -----------------------------------
----- ------------ - ---------------------------------
-------------- - -
----- -------------
------ -
----- ------------------ --------------------
------- ------------------- --------------------
--
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ----------
---- -
----------------------------
-------------
-------------
-
--
-
----- ------------------------------------------
---- -
------- ------------
-
-
-
--
------------- -
------------ -
------- -----
--
--------- -----
---------- -
--- --------------
--------- -----
------ -----
---------- ----
--
-
--
-------- -
--- ----------------------
--------- ------------
--
-
--来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647e99bc48841e9894e4c1c7