Dennis Gaebel 是一名设计技术专家和作家，他热爱开源、CSS架构、SVG、排版、提案、交互和基于模式的设计。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

Webpack 5的新特性

如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是Webpack。在本文中，我将分享 Webpack 5的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。

这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。

期望是什么

在撰写本文时，v5发行版仍处于早期阶段，可能仍会中断，但是主要版本已发生重大更改，某些插件可能无法按预期工作。 Webpack尝试在可能的情况下提供兼容性层，尽管某些更改使此操作变得困难（尤其是有关注入其他运行时代码的问题）如果某个插件无法正常工作，则应在此处 报告，(你也可以在 此处阅读完整的变更日志). 你也应该注意到 Webpack 5最低支持的node.js版本已从6升到8。

一般来说，v5版本主要关注一些关键组件:

• 使用持久缓存提高构建性能

• 使用更好的算法和默认值改善长期缓存

• 在不引入任何破坏性变化的情况下清理内部结构，

• 通过现在引入重大更改来为将来的功能做准备，并允许团队尽可能长时间地使用v5

同样，这里是完整的 changelog， 但是一定要确保在配置更改之前阅读，以保持更新。

要测试v5的工作，可以使用以下命令进行安装：

npm install —save-dev webpack@next
//Js中文网 - 前端进阶资源教程 https://www.javascriptc.com

该命令引用了最新的Alpha版本，但您也可以通过Webpack的存储库使用以下命令，用v5的标签来安装进度的差异版本：

npm install —save-dev webpack@v5.0.0-alpha.9

如果您使用的是Webpack v4或更高版本，您还需要安装 CLI:

npm install --save-dev webpack-cli

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

弃用的内容

v4中不支持的所有项在v5中都被删除了。 迁移到v5时，请确保Webpack 4构建不会打印出弃用警告。 如果您遇到有关错误的问题，请尝试忽略统计信息选项或不使用预设。 也就是说，这些仍然处于预发布阶段，因此最好通过GitHub来询问Webpack团队。

还有一些东西也被删除了，但是v4中没有像IgnorePlugin和BannerPlugin这样的弃用警告，现在必须传递一个options对象。下面是一个可以用于IgnorePlugin的例子，因为当前文档似乎并未对此进行概述：

new webpack.IgnorePlugin({ resourceRegExp: regex })

参考：

• https://webpack.js.org/plugins/banner-plugin/#options

• https://webpack.js.org/plugins/ignore-plugin

自动删除Node.js polyfills

以前，Webpack的目标是允许在浏览器中运行大多数Node.js模块，但是现在模块的环境发生了变化，很多模块的使用现在都是专门以前端目的编写的。 大部分的Node.js核心模块的polyfill依赖的版本<= 4，一旦模块使用任何核心模块，这些模块就会自动应用。

反过来，这又将这些大型的polyfills添加到了最终的包中，但通常是不必要的。v5中的尝试是自动停止填充这些核心模块，并将重点放在前端兼容模块上。

在迁移到v5时，最好尽可能使用前端兼容模块，并在可能时手动为核心模块添加一个polyfill(错误消息可以帮助指导您)。对于核心团队来说，反馈是值得赞赏或鼓励的，因为这个更改可能会也可能不会出现在最终的v5版本中。

确定性chunk和模块IDs

新算法加入已帮助长期缓存， 根据下面的配置行可以在生产模式下启用：

chunkIds: "deterministic”,moduleIds: “deterministic"

该算法以确定性方式将非常短（3或4个字符）的数字ID分配给模块和块。 这是包大小和长期缓存之间的折衷方案。 从v4迁移时，最好对chunkIds和moduleIds使用默认值。 您还可以从配置文件中选择旧的默认设置：

chunkIds: "size”,moduleIds: “size"
//Js中文网 - 前端进阶资源教程 https://www.javascriptc.com

这行将生成较小的包，但更易使它们无效以进行缓存。

参考

• https://webpack.js.org/configuration/optimization/#optimization-moduleids

• https://webpack.js.org/configuration/optimization/#optimization-chunkids

命名 chunk IDs

新命名的chunk id算法现在在开发模式下默认启用，它提供chunks(和文件名)人类可读的引用。模块ID由其相对于上下文的路径决定。chunk ID是由chunk的内容决定的，所以你不再需要使用:

import(/* webpackChunkName: "name" */ "module")

上面的行可以用于调试，但是如果您想控制生产环境的文件名，这也很有意义。 可以在生产中使用chunkIds：“ named”，只是要确保不要意外地暴露有关模块名称的敏感信息。

[

前端应用程序监控

识别

修复
追踪

](https://logrocket.com/signup)

optimization: { chunkIds: 'named' }

从v4迁移时，您可能会发现不喜欢文件名在开发模式下被更改。 考虑到这一点，您可以通过下面的行，以便使用配置文件中的旧的数值模式。

chunkIds: “natural”

参考

• https://webpack.js.org/configuration/optimization/#optimization-chunkids

编译器

编译器在进入和离开空闲状态以及拥有这些状态的挂钩之后，将需要在使用后关闭。 插件可以使用这些挂钩来完成不重要的工作（即，持久性高速缓存将高速缓存缓慢地存储到磁盘）。 编译器关闭时，所有剩余工作应尽快完成。 回调将指示关闭已完成。

插件及其各自的作者应该期望某些用户可能会忘记关闭编译器，因此所有工作最终都应该在空闲时完成。 在工作进行过程中，还应防止流程退出。 当传递回调时，webpack()会自动调用close。 更新到v5时，请确保在完成工作时使用Node.js API调用Compiler.close。

参考

• https://webpack.js.org/api/compiler-hooks

SplitChunks 和模块大小

与显示单个数字和具有不同类型的尺寸相比，模块现在具有以更好的方式表示尺寸的能力。 SplitChunksPlugin现在知道如何处理这些不同的大小，并将它们用于minSize和maxSize。 默认情况下，仅处理javascript大小，但是你现在可以传递多个值来管理它们：

minSize: {  javascript: 30000,  style: 50000,}

迁移到v5时，请确保检查构建中使用的尺寸类型。 可以使用splitChunks.minSize（可选）在splitChunks.maxSize中进行配置。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

参考

• https://webpack.js.org/plugins/split-chunks-plugin

持久缓存

在第5版中，您会发现一个实验性文件系统缓存，该缓存具有启用功能，可以使用Webpack配置文件中的以下行启用：

cache: { type: "filesystem” }

现在，只有核心功能集已经准备好了。但是在使用它时，您必须意识到它的局限性，以避免意外的错误。如果您不完全理解这些限制，那么最好在您真正适应之前完全避免使用这个特性。

您还可以通过自动缓存无效化来解析模块源代码和文件系统结构，但是对配置和加载器/插件/核心更改没有自动缓存失效。如果你想手动缓存失效，有一个选项可以在你的cache.version配置中使用。它目前还没有完全准备好，但你可以通过更新你的缓存使一切顺利运行。升级工具依赖项(webpack、loader、plugin)或更改配置时的版本。

如果想要自动化，最好hash webpack.config.js and node_modules/.yarn-integrity 并将他们传递给cache.version 这很可能是Webpack团队将在内部进行的操作。

_在使用持久缓存时，您不再需要缓存加载器。正如babel cacheDirectory__

参考

• https://webpack.js.org/configuration/other-options/#cache

配置变更

由于无法列出太多配置更新，因此您可以通过v5 changelog来阅读所有的配置更改。

内部变更

有一些与插件作者严格相关的内部变化。如果您需要通过changelog引用这些内部更改，您可以进一步阅读有关这些内部更改的信息。

分离的思想

如果您发现令人困惑的错误或需要进一步的帮助，请确保在此处 提出问题，或滚动浏览其他开发人员发布的评论，如下所示： 您可以在发布问题之前找到问题的答案。

如果您发现变更日志中缺少某些内容，请确保为团队提供帮助并在此处.报告。 目前，每个Webpack贡献者都具有写访问权限，不鼓励那些不发送请求的人。

最后，在报告问题之前，请确保尝试使用最新的Alpha版本进行升级，因为该问题可能已经得到解决。愉快的使用！

有用的链接 & 资源

• https://github.com/webpack/webpack

• https://webpack.js.org/configuration

• https://webpack.js.org/concepts

• https://www.javascriptc.com

---

插件: [LogRocket][29]， web应用程序的DVR。

[][30]

除了记录Redux动作和状态外，LogRocket还记录控制台日志，JavaScript错误，堆栈跟踪，带有标头+正文，浏览器元数据和自定义日志的网络请求/响应。 它还使用DOM来记录页面上的HTML和CSS，甚至可以对最复杂的单页面应用程序重新创建像素完美的视频。

作者：张欢
链接：https://www.zcfy.cc/article/new-features-in-webpack-5