前言

webpack5早在2020年就已经发布了，下面就一起来看看webpack5都有哪些升级吧

相较webpack4的改动

• 不再为nodejs模块自动引用Polyfills

介绍

所谓Polyfills其实就是比如有一些代码在现代浏览器并不支持，那如果想要在现代浏览器去使用他就需要自己去实现这个功能模块。而Polyfills就是一种对代码进行兼容性处理的做法的统称。很多时候项目里如果用到了nodejs模块，但这些模块在浏览器中是不支持的。webpack为了能让项目完整运行 就会自动的去引入模块相对应的Polyfills，从而导致最终的bundle非常的大，而webpack5则废弃掉了这一特性。因为很多东西本来就不是在浏览器用的，你如果非要用其实npm上也会有相应的包来取代他。但如果还是坚持要使用的话 也是有办法的，我们可以根据错误提示，手动的去引入这个模块的Polyfills。

let path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'result'
  },
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify")
    }
  },
}

具体的操作这里就不做多赘述，网上会有详细的教程。

• 清除一些废弃语法
• 长期缓存

提示

webpack在打包的时候会有一个moduleID和chunkID,原先在打包的时候会按顺序用一个数字作为id，一旦我们的代码发生了变化，代码重新打包就会导致这个id发生变化。id发生了变化就会导致文件名字改变，从而对缓存非常的不利。 在webpack5之后会提供多几种的id组合选择给到用户。从而可以更大程度上利用好浏览器缓存

• 持久化缓存

提示

充分利用好浏览器缓存，是前端项目优化的一个重中之重。webpack在构建的时候也是一样，一些不发生变化的文件就没必要每次都去重新构建他了。在webpack5之前其实也是有提供cache-loader和babel-loader的cacheDirectory选项来配置缓存，webpack5之后就已经把这些内置进来了。使用者只需要配置cache对象就可以对缓存进行一些额外的定制效果 缓存默认是存在内存里的，我们可以配置存在磁盘中，缓存的淘汰策略一般是最大500mb，存两个星期。一旦超过时间或者超出大小就会将旧的淘汰掉

• three shaking强化

提示

在webpack5中对three shaking是有了一个更好的支持，已经可以对嵌套的模块进行three shaking了，

• 支持生成es6代码，新版可以在output中配置生成代码的es版本
• 模块联邦

提示

模块联邦是webpack5新出的一个重要特性，他具体的作用简单描述就是，可以让多个项目代码更好的共享，在次之前要共享代码需要将被共享的打包发布到npm上然后让使用者下载安装才能共享。有了模块联邦之后可以通过一些配置就轻松做到共享代码。并且他也可以用来实现微前端。具体的实践会再出一篇文章，这里就不过多赘述

• bundle和bundless

提示

这一点不是webpack5的提升而是目前多种打包工具之间的概念差异。现在非常火的vite采用的就是bundless的思路。两者的区别主要在于，bundle是所有代码构建后的一个合集，而bundless利用现在http2请求数量无限制，以及大部分浏览器都支持esm的特性。做到不整合资源，你用到啥就加载啥。这也就是为什么采用bundless的vite冷启动非常快。因为他跳过的打包阶段。这样做的好处就是本低开发效率非常的高，并且代码调试也很方便。当然也有他不好的地方，那就是请求数量会增多。所以 在开发环境下我们可以更多的去考虑bundless来提升开发效率，而生产环境最好还是保留bundle这种方式。毕竟请求数量变多了对服务器是一个不小的压力。

总结

• 不再为nodejs自动引入Polyfills
• 清除废弃语法
• 长期缓存，主要体现在moduleid和chunkid的变化上，由以前的按顺序一位数变为了现在的三位数，优化缓存的利用
• 长期缓存，以前需要通过额外的loader或者插件来进行构建期间代码的缓存，现在可以直接通过配置cache对象来自定义缓存策略
• theeshaking的增强
• 模块联邦