webpack5新特性

92 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情

简介

这个主要版本也是修改一些默认值的机会,并与此同时出现的建议和规范保持一致。

所以今天(2020-10-10)webpack 5.0.0 发布了,但这并不意味着它已经完成了,没有 bug,甚至功能完整。 就像 webpack 4 一样,我们通过修复问题以及增加新特性来延续开发。 在接下来的日子里,可能会有很多 bug 修复。新特性可能也会出现。

这个版本的重点在于以下几点。

  • 尝试用持久性缓存来提高构建性能。
  • 尝试用更好的算法和默认值来改进长期缓存。
  • 尝试用更好的 Tree Shaking 和代码生成来改善包大小。
  • 尝试改善与网络平台的兼容性。
  • 尝试在不引入任何破坏性变化的情况下,清理那些在实现 v4 功能时处于奇怪状态的内部结构。
  • 试图通过现在引入突破性的变化来为未来的功能做准备,使其能够尽可能长时间地保持在 v5 版本上。

重大变更

一、功能清除

1. 清理弃用的能力

所有在 v4 中被废弃的能力都被移除。

迁移: 确保你的 webpack 4 构建没有打印废弃警告。

以下是一些被移除但在 v4 中没有废弃警告的东西:

  • IgnorePlugin 和 BannerPlugin 现在必须只传递一个参数,这个参数可以是对象、字符串或函数。

2. 废弃代码

新的弃用包括一个弃用代码,这样他们更容易被引用。

3. 语法废弃

require.include已被废弃,使用时默认会发出警告。

可以通过 Rule.parser.requireInclude 将行为改为允许、废弃或禁用。

4. 不再为 Node.js 模块 自动引用 Polyfills

在早期,webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中,但如今模块的格局已经发生了变化,现在许多模块主要是为前端而编写。Webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyfills,一旦某个模块引用了任何一个核心模块(如 cypto 模块),webpack 就会自动引用这些 polyfills。

尽管这会使得使用为 Node.js 编写模块变得容易,但它在构建时给 bundle 附加了庞大的 polyfills。在大部分情况下,这些 polyfills 并非必须。

从 Webpack 5 开始不再自动填充这些 polyfills,而会专注于前端模块兼容。我们的目标是提高 web 平台的兼容性。

迁移

  • 尽量使用前端兼容的模块。
  • 可以手动为 Node.js 核心模块添加 polyfill。错误提示会告诉你如何实现。
  • Package 作者:在 package.json 中添加 browser 字段,使 package 与前端兼容。为浏览器提供其他的实现/dependencies。

二、支持崭新的 Web 平台特性

1. URIs

Webpack 5 支持在请求中处理协议。

  • 支持data:。支持 Base64 或原始编码。Mimetype 可以在module.rule中被映射到加载器和模块类型。例如:import x from "data:text/javascript,export default 42"

  • 支持file:

  • 支持http(s):,但需要通过new webpack.experiments.s schemesHttp(s)UriPlugin()选择加入。

    • 默认情况下,当目标为 "web "时,这些 URI 会导致对外部资源的请求(它们是外部资源)。

支持请求中的片段。例如:./file.js#fragment

2.原生 Worker 支持

当把资源的 new URL 和 new Worker/new SharedWorker/navigator.serviceWorker.register 结合起来时,webpack 会自动为 web worker 创建一个新的入口点(entrypoint)。

new Worker(new URL("./worker.js", import.meta.url))

选择这种语法也是为了允许在没有打包工具的情况下运行代码。这种语法在浏览器的原生 ECMAScript 模块中也可以使用。

三、长期缓存

1. 确定的 Chunk、模块 ID 和导出名称

新增了长期缓存的算法。这些算法在生产模式下是默认启用的。

chunkIds: "deterministic" moduleIds: "deterministic" mangleExports: "deterministic"

该算法以确定性的方式为模块和分块分配短的(3 或 5 位)数字 ID, 这是包大小和长期缓存之间的一种权衡。

2. 真正的内容哈希

当使用 [contenthash] 时,Webpack 5 将使用真正的文件内容哈希值。之前它 "只" 使用内部结构的哈希值。 当只有注释被修改或变量被重命名时,这对长期缓存会有积极影响。这些变化在压缩后是不可见的。

总结

那么发布意味着什么呢?

这意味着我们完成了重大的变更。 许多重构已经完成,以提高架构的水平,并为未来的功能(和当前的功能)创建一个良好的基础。

那么什么时候是升级的时候呢?

这要看情况。有一个很好的机会,升级失败,你需要给它第二次或第三次尝试。 如果你愿意的话,现在就尝试升级,并向 webpack、插件和加载器提供反馈。 我们很想解决这些问题。总得有人开始,而你将是第一批受益者之一。

详情可访问:webpack.docschina.org/blog/2020-1…