webpack5 新特性

第五代webpack昨天发布，距离上一个版本4.0有两年的时间，这次的发版给javascript生态中最常用的打包模块带来了很多变化。如果像我一样，在webpack兴起之前就开始了你的前端生涯，你还记得在工作中使用gulp和grunt的抱怨和沮丧吗？

让我们来看看这个非常受欢迎的库的新版本带来的重大变化和改进

这个版本需要关注5个关键点

快速持久的构建

开发者们抱怨最多的就是关于webpack的打包速度太慢。这个模块打包现在提供了一共文件缓存系统，通过打包加速可以提高我们的开发生产力。

更小的包体积

改善已经做了TreeShaking的代码（已被称为废弃代码）。同时上一个版本有能力移除没用的代码，webpack5更进了一步。webpack有能力移除代码里的内部模块，从而减少体积。更多webpack5的优化特性，访问https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-optimization

更长的缓存

在打包大小之后，最能改善应用加载时间的是缓存。有缓存后，访问者访问你的应用体检几乎是瞬间打开的。在webpack 5中，对代码所做的改变不会改变最小化版本(例如，注释或变量名)，不会导致缓存失效。意味着你的用户将能够体验长时间的缓存。

现在进行重大更改，以便以后进行进一步的改进

在此版本有许多改变将不会有任何的显性影响。换句话来说，在未来的版本里会允许使用新的特性。

这些新的特性包括用http(s) 导入 module 扩展。它将帮你开发微前端。还有更多新的并且让人兴奋的特性，可以访问https://webpack.js.org/blog/2020-10-10-webpack-5-release/#experiments

另外一个改变是Nodejs版本需要从6到10.13.0，放弃对旧Node.JS版本的支持将允许团队简化他们的代码，并删除支持这些旧版本的解决方案。

webpack5同时也带来了一个新的 experiments 配置选项支持 WebAssembly， Async Web Assembly， Top Level Await 并且输出你的包成一个模块（之前只有rollup支持）

模块联邦

这是个新的特性，简单说，允许多个 webpack 构建在一起工作。它允许你的应用动态加载代码从其它应用（webpack打包的）。模块联合最流行的应用是启用微前端架构。

如果你感兴趣学习更多，可以访问https://webpack.js.org/concepts/module-federation/