webpack 从 v3 升级到 v4 之后的一些注意点-JavaScript中文网-JavaScript教程资源分享门户

简介

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

webpack 从 v3 升级到 v4 之后的一些注意点

简介