Webpack 5有哪些值得期待▶️
本文首发于知乎，大家可以通过文章底部的阅读原文来访问原文地址。文末有视频。
Webpack 5已经到来
早在今年（2019年）的2月份，Webpack核心团队的Sean Larkin就做过一次关于webpack 5新特性的演讲，为大家讲述了webpack 5目前的开发进展，还有webpack 5会有哪些新特性。
img
现在，我们已经可以安装最新的webpack 5了，不过v5还不是正式版本。目前npm官网上的最新版本仍然是v4
img
为了体验v5版本，你需要使用下面的命令
yarn add webpack@next webpack-cli --dev
npm install webpack@next webpack-cli --save-dev
webpack 5有哪些值得期待
本次major版本的修改主要参照下面的四个主要方向：
- 利用
持久缓存来提高构建性能 - 优化算法和默认值来改善长期缓存
- 重构了内部代码，而不引入重大变更
- 为了未来可能的功能，引入一些重大的变更，以便可以让团队长时间停留在v5版本
持久缓存（Persistent Caching）
先简单地概述一下webpack的工作原理：webpack读取入口文件（entry），然后递归查找所依赖的模块(module)，构建成一个“依赖图”，然后根据配置中的加载器(loader)和打包策略来对模块进行编译。
但是如果中间有文件发生变化了，上面所述的整个递归遍历流程会重新再进行一次。
大致流程如下：
img
webpack 5利用持久缓存优化了整个流程，当检测到某个文件变化时，依照“依赖图”，只对修改过的文件进行编译，从而大幅提高了编译速度。
经过测试，16000模块的单页应用，速度可以提高98%
img
img
数据来自Sean Larkin的《The Road to Webpack 5》
命名IDs
在v5版本中，开发模式将默认开启全新的命名chunk id算法，编译后的chunk名称可读性大大加强。
模块ID(Module ID)由其相对于上下文的路径而确定，代码块ID(Chunk ID)由其内容来决定。
img
此外，在v5版本中还通过新的算法来帮助长期缓存（long-term caching）。在生产环境中，可以使用下面的配置来启用新算法：
chunkIds: "deterministic”,
moduleIds: “deterministic"
新算法会以确定的方式为模块(module)和代码块(chunk)分配一个非常短（3或4个字符）的数字ID。所以，今后再生产环境中，如果你修改了vendor bundle中的一个依赖，那些并没有发生变化的模块ID也不会改变，所以仍然可以被浏览器缓存，提高资源加载的性能。
img
NodeJS的polyfill脚本被移除
最开始，webpack的目标是允许在浏览器中运行大多数的Node模块，但是现在模块格局已经发生了重大变化，现在有很多模块是专门为前端开发的。在v4及以前的版本中，对于大多数的Node模块将自动添加polyfill脚本（腻子脚本）。
然而，这些大量繁杂的脚本都会添加到最终编译的代码中(bundle)，但其实通常情况下是没有必要的。在v5版本中将尝试停止自动地添加polyfill脚本，转而专注于前端兼容模块。
在迁移到v5版本时，最好尽可能使用前端兼容模块，如果一定要用到核心模块的话，请为其添加polyfill(webpack会通过错误提示来指导帮助开发者)。
废弃了一些特性
那些在v4中已经被抛弃但是仍然可以被使用的特性，将再v5中彻底被废弃。
所以在迁移到v5时，请留意那些在v4中抛出“弃用警告”（deprecation warnings）的提示。
img
除此之外，还有一些东西也被移除了，但是在v4中没有抛出弃用警告，例如IgnorePlugin和BannerPlugin，现在必须传递一个options对象。
引入了更多新东西
webpack 5 要求node的最低版本为 Node 8。不再是之前的Node 6。
img
另外，webpack 5还引入了webAssembly、Hashing、多线程、还有workers。
总结
今年的前端小伙伴们要学习的东西还真多，Flutter、Vue 3.0、现在又来了Webpack 5。真是“学无止境”~~
参考文章：
- New Features in Webpack 5
- The Road to Webpack 5
- Changelog-v5