webpack构建缓存机制-hash值

    了解构建缓存前，需要先思考浏览器对文件缓存机制(浏览器为了优化体验，会有缓存机制)。如果浏览器判断当前资源没有更新，就不会去服务端下载，而是直接使用本地资源。在webpack的构建中，我们通常使用输出文件名output Filenames来决定输出的文件名。

webpack中对于输出文件名可以有三种hash值：1. hash； 2. chunkhash； 3. contenthash。

1、hash：使用hash，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效；

2、chunkhash：extract-text-webpack-plugin定义的contenthash，根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。并且webpack4中支持了异步import功能，顾chunkhash也作用于此。这样就会有个问题，只要对应css或则js改变，与其关联的文件hash值也会改变，但其内容并没有改变呢，所以没有达到缓存意义。顾contenthash的用途随之而来。

3、contenthash：是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变，所以我们可以通过contenthash解决上诉问题。