背景
前段时间听说webpack5在构建速度方面有了质的提升，就想着骚一波，把之前的项目提升到webpack5来得瑟一下。经过一番折腾，真香！下面就跟大家展示一下，我这酸爽的经验果实。
升级大事记
1. dist目录删除
好家伙，身为老手的我，初始化完项目并添加基本的打包配置之后，立马开始安装 clean-webpack-plugin 插件。打包之前先清理一下之前的dist文件，防止之前的废弃文件混入新的打包结果里面，这我还是知道的。一通猛如虎的操作之后，我发现我就是瞎鼓捣。原来 webpack5 已经提供了配置，轻松的就实现了 clean-webpack-plugin的功能，无需再借助第三方插件。
通过配置 output.cache = true 来替代之前 clean-webpack-plugin 的功能。
2. contenthash、chunkhash和hash
这里顺带回顾一下webpack4的功能。主要是前段时间有个迭代发布到线上，发现有缓存，如果不进行强刷，新功能没法使用的情况，然后利用webpack的这个功能轻松解决的。
- hash模式：
hash模式是同一次构建过程中生成的hash都是一样的，只要项目里有文件发生更改，整个项目构建的hash值都会更改。
修改 index.js 文件之前打包结果：
修改 index.js 文件之后打包结果：
我只是修改了一下 index.js 中的一个单词，打包结果就完全不相同了
- chunkhash模式：
chunkhash相对于hash不同的是，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。
修改 index.js 文件之前打包结果：
修改 index.js 文件之后打包结果：
通过对比，我们发现由于我只修改了index.js，所以vendor.js的hash值没有改变，发生变化的只有index.js相关的资源文件。
- contenthash模式：
contenthash是由文件内容产生的hash值，内容不同产生的contenthash值也不一样。
修改 index.js 文件之前打包结果：
修改 index.js 文件之后打包结果：
相比较于chunkhash模式，即使我修改了index.js，但是打包出来的css文件的hash值依然没有变化。
3. css压缩
webpack5之前将css打包之后是默认没有压缩的，需要通过配置 css-loader 的 minimize 属性来对css进行打包，或者通过添加 css-minimizer-webpack-plugin 来压缩css文件。但是，到了webpack5之后，css文件打包之后会默认压缩的，不需要进行额外的配置
4. cache缓存
在webpack5之前，缓存文件有两种常用的方式：
-
在loader中使用 cache-loader
-
在babel-loader中使用 cacheDirectory
而在webpack5之后，可以通过配置cache来开启缓存，并指定type为filesystem来优化。当设置 cache.type: "filesystem" 时，webpack 会在内部以分层方式启用文件系统缓存和内存缓存。 从缓存读取时，会先查看内存缓存，如果内存缓存未找到，则降级到文件系统缓存。 写入缓存将同时写入内存缓存和文件系统缓存。
5. 字体、图片资源loader
在webpack5之前，处理图片、字体等资源，比较常用的loader是file-loader； 而在webpack5之后，webpack内置了 type = asset/resource 来处理这些资源。
