webpack中hash、chunkhash、contenthash区别

webpack中对于输出文件名能够有三种hash值：

1. hash

2. chunkhash

3. contenthash

这三者有什么区别呢？

hash

若是都使用hash的话，由于这是工程级别的，即每次修改任何一个文件，全部文件名的hash至都将改变。因此一旦修改了任何一个文件，整个项目的文件缓存都将失效。如：

能够从上图清晰的看见每一个压缩后的文件的hash值是同样的，因此对于没有改变的模块而言，这样作显然不恰当，由于缓存失效了嘛。此时，chunkhash的用途随之而来。

chunkhash

chunkhash根据不一样的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着咱们采用chunkhash的方式生成哈希值，那么只要咱们不改动公共库的代码，就能够保证其哈希值不会受影响。而且webpack4中支持了异步import功能，固，chunkhash也做用于此，以下：

咱们将各个模块的hash值 (除主干文件) 改成chunkhash，而后从新build一下，可得下图：

咱们能够清晰地看见每一个chunk模块的hash是不同的了。

可是这样又有一个问题，由于咱们是将样式做为模块import到JavaScript文件中的，因此它们的chunkhash是一致的，如test1.js和test1.css：

这样就会有个问题，只要对应css或则js改变，与其关联的文件hash值也会改变，但其内容并无改变呢，因此没有达到缓存意义。固contenthash的用途随之而来。

contenthash

contenthash是针对文件内容级别的，只有你本身模块的内容变了，那么hash值才改变，因此咱们能够经过contenthash解决上诉问题。以下：

 

That's all~