webpack5 中的新功能

1,310 阅读5分钟

前言

如果你的项目使用了webpack,那你可以看下新的webpack 带来的新特性,可以让你在后续工作使用它时应该注意的事项。 如果你还没有用webpack,那赶紧学起来吧。

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

期望是什么?

在写本篇文章的时候,v5 仍然没有发布正式版,还在 beta 测试,有可能会中断。webpack 尝试在各种可能的情况下提供兼容性层,尽管某些更改使这个操作变得困难,如果你的插件不能正常工作,可以在此处进行报告。你还可以去阅读完整的报告日志

[注意]:webpack 5 最低支持 nodejs 版本从 6 升到 8

v5 版本主要关注点:

  • 使用持久缓存提高构建性能
  • 使用更好的算法和默认值改善长期缓存
  • 在不引入任何破坏性变化的情况下清理内部结构
  • 通过现在引入重大更改来为将来的功能做准备,并允许团队尽可能长时间地使用v5

完整的 changelog ,但是一定要确保在配置更改之前阅读,以保持更新。 要测试 v5 的工作,可以使用以下命令进行安装:

npm i  webpack@next -D

弃用的配置

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

自动删除Node.js polyfills

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

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

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

Deterministic chunk and module IDs

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

chunkIds: "deterministic”,moduleIds: “deterministic"

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

chunkIds: "size”,moduleIds: “size"

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

可以参考以下链接

编译器

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

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

参考以下链接

SplitChunks 和模块大小

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

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

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

参考以下链接

持久缓存

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

cache: { type: "filesystem” }

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

在使用持久缓存时,您不再需要 cache-loader。正如babel cacheDirectory

参考以下链接

配置变更

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

参考文章