前言
如果你的项目使用了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来阅读所有的配置更改。