张欢

Webpack 5的新功能

原文链接: blog.logrocket.com

LogRocket Blog

分享

回复

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

Webpack 5的新特性

阅读 1689 于2019年2月6日6分

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

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

期望是什么

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

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

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

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

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

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

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

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

npm install —save-dev webpack@next

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

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

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

npm install --save-dev webpack-cli

弃用的内容

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

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

new webpack.IgnorePlugin({ resourceRegExp: regex })

参考:

自动删除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"

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

参考

命名 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”

参考

编译器

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

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

参考

SplitChunks 和模块大小

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

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

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

参考

持久缓存

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

cache: { type: "filesystem” }

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

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

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

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

参考

配置变更

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

内部变更

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

分离的思想

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

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

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

有用的链接 & 资源


插件: LogRocket, web应用程序的DVR。

https://logrocket.com/signup/

LogRocket i[LogRocket](https://logrocket.com/signup/)是一个前端日志记录工具,可让您像在您自己的浏览器中一样重现问题。 LogRocket无需猜测错误发生的原因或向用户询问屏幕截图和日志转储,而是让您重现会话以快速了解出了什么问题。 无论框架如何,它都能与任何应用完美配合,并且具有用于记录来自Redux,Vuex和@ ngrx / store的其他上下文的插件。

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

免费试用