编译期会出现错误提示有哪些_Webpack 5有哪些值得期待

Webpack 5已经到来

早在今年（2019年）的2月份，Webpack核心团队的Sean Larkin就做过一次关于webpack 5新特性的演讲，为大家讲述了webpack 5目前的开发进展，还有webpack 5会有哪些新特性。

现在，我们已经可以安装最新的webpack 5了，不过v5还不是正式版本。目前npm官网上的最新版本仍然是v4

为了体验v5版本，你需要使用下面的命令

yarn add webpack@next webpack-cli --dev

npm install webpack@next webpack-cli --save-dev

webpack 5有哪些值得期待

本次major版本的修改主要参照下面的四个主要方向：

1. 利用持久缓存来提高构建性能
2. 优化算法和默认值来改善长期缓存
3. 重构了内部代码，而不引入重大变更
4. 为了未来可能的功能，引入一些重大的变更，以便可以让团队长时间停留在v5版本

持久缓存（Persistent Caching）

先简单地概述一下webpack的工作原理：webpack读取入口文件（entry），然后递归查找所依赖的模块(module)，构建成一个“依赖图”，然后根据配置中的加载器(loader)和打包策略来对模块进行编译。

但是如果中间有文件发生变化了，上面所述的整个递归遍历流程会重新再进行一次。

大致流程如下：

webpack 5利用持久缓存优化了整个流程，当检测到某个文件变化时，依照“依赖图”，只对修改过的文件进行编译，从而大幅提高了编译速度。

经过测试，16000模块的单页应用，速度可以提高98%

数据来自Sean Larkin的《The Road to Webpack 5》

命名IDs

在v5版本中，开发模式将默认开启全新的命名chunk id算法，编译后的chunk名称可读性大大加强。

模块ID(Module ID)由其相对于上下文的路径而确定，代码块ID(Chunk ID)由其内容来决定。

此外，在v5版本中还通过新的算法来帮助长期缓存（long-term caching）。在生产环境中，可以使用下面的配置来启用新算法：

chunkIds: "deterministic”,
moduleIds: “deterministic"

新算法会以确定的方式为模块(module)和代码块(chunk)分配一个非常短（3或4个字符）的数字ID。所以，今后再生产环境中，如果你修改了vendor bundle中的一个依赖，那些并没有发生变化的模块ID也不会改变，所以仍然可以被浏览器缓存，提高资源加载的性能。

NodeJS的polyfill脚本被移除

最开始，webpack的目标是允许在浏览器中运行大多数的Node模块，但是现在模块格局已经发生了重大变化，现在有很多模块是专门为前端开发的。在v4及以前的版本中，对于大多数的Node模块将自动添加polyfill脚本（腻子脚本）。

然而，这些大量繁杂的脚本都会添加到最终编译的代码中(bundle)，但其实通常情况下是没有必要的。在v5版本中将尝试停止自动地添加polyfill脚本，转而专注于前端兼容模块。

在迁移到v5版本时，最好尽可能使用前端兼容模块，如果一定要用到核心模块的话，请为其添加polyfill(webpack会通过错误提示来指导帮助开发者)。

废弃了一些特性

那些在v4中已经被抛弃但是仍然可以被使用的特性，将再v5中彻底被废弃。

所以在迁移到v5时，请留意那些在v4中抛出“弃用警告”（deprecation warnings）的提示。

除此之外，还有一些东西也被移除了，但是在v4中没有抛出弃用警告，例如IgnorePlugin和BannerPlugin，现在必须传递一个options对象。

引入了更多新东西

webpack 5 要求node的最低版本为 Node 8。不再是之前的Node 6。

另外，webpack 5还引入了webAssembly、Hashing、多线程、还有workers。

总结

今年的前端小伙伴们要学习的东西还真多，Flutter、Vue 3.0、现在又来了Webpack 5。真是“学无止境”~~

https://www.zhihu.com/video/1138159146842095616

参考文章：

• New Features in Webpack 5
• The Road to Webpack 5
• Changelog-v5