Webpack中hash、chunkhash和contenthash三者的区别

在webpack中有三种的方式生成哈希值，分别为hash、chunkhash和contenthash。这三种方式有着不同的用处，或者说在webpack的不同环境中，会使用不同的方式生成哈希值。那为什么要这样的一个区分呢？我们一起探讨下：

hash

主要用于webpack的开发环境，在项目构建编译中根据文件是否更改，生成一个统一的hash值。就是说只要构建编译过程中只要一个文件修改了，则整个项目的hash值都会统一改变（整个项目的hash值是一样的）。这样一来在每次的开发中，文件都不会让浏览器器缓存，保证了文件的更新率，提高了开发过程中的效率。

chunkhash

用于webpack的生产环境，从字面上就能猜出它是跟webpack打包的chunk相关的。具体来说webpack是根据入口entry配置文件来分析其依赖项并由此来构建该entry的chunk，并生成对应的hash值。不同的chunk会有不同的hash值。
在生产环境中，我们会把第三方或者公用类库进行单独打包，所以不改动公共库的代码，该chunk的hash就不会变，可以合理的使用浏览器缓存了。
但是生产环境中我们会用webpack的插件，将css代码打单独提取出来打包。这时候chunkhash的方式就不够灵活，因为只要同一个chunk里面的js修改后，css的chunk的hash也会跟随着改动。因此我们需要contenthash。

contenthash

contenthash表示由文件内容产生的hash值，内容不同产生的contenthash值也不一样。生产环境中，通常做法是把项目中css都抽离出对应的css文件来加以引用。