简介
Webpack 是一个模块打包工具，自 2012 年发布以来，得到了广大前端开发人员的热烈欢迎。此前，Webpack 3 是前端开发者中常用的版本。然而，由于 Webpack 3 的一些问题和限制，Webpack 4 推出后成为了前端开发者必备的版本。
在此文中，我们将深入探讨从 Webpack 3 到 Webpack 4 的升级过程，并分享一些注意点，帮助您更好地从 Webpack 3 迁移到 Webpack 4，使您的开发流程更加高效。
Webpack 4 带来的改进
在 Webpack 3 时，由于其处理方式的限制，一些深层次的代码优化难以实现。但是 Webpack 4 的新功能加入，可以显著提高您的打包时间和构建性能。
以下是 Webpack 4 带来的改进：
- 弃用
CommonsChunkPlugin，引入optimization.splitChunks在 chunk 间共享模块。 - 引入
optimization.runtimeChunk，将 runtime 代码单独打包，避免了每次修改代码时的重新构建。 - 引入
Mode模式，提供三个选项，分别是：production、development和none。 - 支持零配置模式，可根据入口文件自动识别所需模块并打包。
- 引入
performance选项，可以检查构建输出大小是否达到预设的限制，并给出警告。
以上改进是 Webpack 4 引入的一些新特性，它们可以显著提高你的构建效率。
Webpack 3 到 Webpack 4 的升级
虽然 Webpack 4 带来了很多优化，但是它的升级也需要你做出一些工作。下面是一些您需要注意的地方：
插件相互依赖
在 Webpack 4 中，与插件相关的方法的位置已经被改变。例如，在 Webpack 4 中，optimize.CommonsChunkPlugin 已被弃用。此前为了实现正确的代码分离，我们使用该插件。在 Webpack 4 中，这一工作通过 optimization.splitChunks 实现。
当您试图升级时，请注意依赖情况，以免因为插件相互依赖而出现错误。
引入Mode模式
Mode 模式是 Webpack 4 新增的一个选项，提供 development、production 和 none 三个选项。在 Webpack 3 中，由于缺少这一选项，您可能需要手动配置文件来实现不同的需求。
例如，在 Webpack 3 中，您可能需要在配置文件中手动添加以下代码：
----- ------- - --- -- --------------------- --- ------------- - ---------------- ------------------ -
而在 Webpack 4 中，由于引入了 Mode 模式，您只需在运行 Webpack 时向 --mode 选项中传递 production 参数即可启用该模式，不需要手动配置文件。
性能提升
Webpack 4 引入了一些新特性，可以大大提高您的构建速度。例如，在 Webpack 4 中，您可以通过使用 optimization.runtimeChunk 来将 runtime 代码单独打包，避免了每次修改代码时的重新构建。
此外，还有一些提示，例如 optimization.minimize 可以显著缩小文件大小，在文件传输和装载时加快速度。
示例代码
以下代码演示了如何将 Webpack 3 配置转换为 Webpack 4 配置：
----- ---- - ----------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
------------- -
------------ -
------- -------
-
-
-
--正如您所看到的那样，只需添加 mode 属性和 optimization 对象即可将 Webpack 3 配置转换为 Webpack 4 配置。
结论
Webpack 4 作为 Webpack 的最新版本，带来了很多改进和优化。虽然升级到 Webpack 4 需要一些额外的工作，但是通过升级，可以大大提高您的开发效率和构建速度。
在升级前，请认真阅读本文并遵循其中提到的注意事项。希望本文对您有所帮助，祝您使用 Webpack 4 开心愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6715b5ebad1e889fe2188d2a