Webpack 4 更新详解-JavaScript中文网-JavaScript教程资源分享门户

前言

Webpack 是一个广泛使用的前端构建工具，其最新版本为 4.x 版本，带来了很多新特性和改进，这些更新对于前端工程化和构建优化都具有深远的影响。在这篇文章中，我们将深入探讨 Webpack 4 的新特性和改进，并为大家提供详细的学习指导和实用示例。

Webpack 4 的新特性

Webpack 4 主要带来了以下新特性：

默认使用 `mode` 模式

Webpack 4 新增了 mode 模式的概念，包括 development、production 和 none 三种模式。当我们通过命令行传递参数 --mode 时，Webpack 会根据参数值自动配置一些默认选项，不需要再手动配置一些常用的选项。

例如，如果我们使用 mode: 'production'，Webpack 会自动为我们开启一些优化选项，比如压缩代码、去除无用的代码等等。而如果我们使用 mode: 'development'，则会自动为我们配置一些方便调试的选项，比如启用 source map 等。

新的 `optimization` 选项

Webpack 4 的 optimization 选项提供了很多新功能，包括：

splitChunks：用于提取公共代码，把重复的代码合并成一个单独的文件，从而减少文件大小和请求次数。
minimize：用于开启代码压缩。
concatenateModules：用于启用模块合并，将模块合并到一个作用域里，优化代码执行速度。

新的文件名替换规则

Webpack 4 增强了文件名替换的能力，提供了 contenthash 和 chunkhash 两种新的替换规则，用于生成唯一的文件名。 contenthash 会根据文件的内容生成一个不同的 hash 值，而 chunkhash 则会根据 chunk 的内容生成一个不同的 hash 值。

这两种规则可以帮助我们解决浏览器缓存问题，当文件内容改变时，文件名也会随之改变，从而使浏览器重新请求新的文件。

Webpack 4 的改进

除了新特性，Webpack 4 还改进了一些现有功能，包括：

简化的配置文件

Webpack 4 通过优化配置文件，把很多配置选项的默认值设为了最常用的选项，从而简化了配置文件。比如，现在 output 默认的 path 是 dist 目录，而 devServer 默认的 contentBase 是项目根目录。

这让 Webpack 的初学者更容易上手，也让配置文件更易读、更易理解。

优化的性能

Webpack 4 在性能上也有了很大的提升。官方测试表明，在压缩代码时，Webpack 4 比 Webpack 3 快了几倍，而打包速度也得到了大幅度的提升。

这一点对于大型项目的开发十分重要，使得前端工程师的工作效率得到了进一步提高。

学习和指导意义

Webpack 4 的发展和升级，对于前端自动化和工程化的推进起到了极大的作用。学习和掌握 Webpack 4，可以大大提高前端开发的效率和质量。

以下是一些指导意义：

将代码拆分成更小的模块，使得网站加载速度加快。
简化了配置文件，减少了学习成本和应用难度。
面向生产环境，优化了代码体积和效率，提高认知和实战能力。
降低了前端开发的复杂度，提高了我们的效率。

代码示例

以下是一个使用 Webpack 4 的简单示例：

-- -------------------- ---- -------
---- -- ------- - -----------
--- ------- ------- ----------- ----------

---- -- ------------------- ---- ---- --
--- ------- ------------------- ----------

---- ---- ---------- -------

--------- -----
----- ----------
------
  ----- ----------------
  -------------- - ------------
-------
------
  ---- ----------------
-------
-------

---- ---- ------ ----------

----------------------------------------- - ------ --------

---- ---- ----------------- --

----- ----------------- - -------------------------------

-------------- - -
  ----- --------------
  ------ -----------
  ------- -
    --------- -----------
  --
  -------- -
    --- -------------------
      --------- ---------------
      --------- --------------
    --
  -
--

---- -- ------- ----

--- -------

在这个示例中，我们通过安装 webpack 和 webpack-cli，并创建一个简单的 HTML 页面和 JavaScript 文件来使用 Webpack 4 进行打包。我们也可以看到，Webpack 4 确实大大简化了配置文件，便于我们迅速上手。

结论

Webpack 4 带来了很多新特性和改进，并让 Webpack 的配置和打包更加简单和高效。使用 Webpack 4，我们可以轻松地构建现代化网站，提高前端开发效率和质量。希望这篇文章对你有所帮助，谢谢阅读！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674efb42e884a3e30f2b5f05

Webpack 4 更新详解

前言