webpack中chunkHash和contentHash的区别

首先什么是webpack？ 本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。

webpack有各种哈希值(hash)，一般是结合CDN缓存来使用以达到前端性能优化的目的。每次项目构建hash时对应的哈希值会改变，对应的HTML引用的URL地址也会改变，进而触发CDN服务器从源服务器上拉取对应数据，然后便能更新本地缓存。

下面简单讲讲chunkHash和contentHash的区别：

chunkhash和普通的hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析，构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件（主入口文件Index.js及其对应的依赖文件Index.css）区分开，单独打包构建，接着我们采用chunkhash的方式进行哈希值，那么只要我们不改动公共库得到代码，就可以保证其哈希值不会受影响。

但是chunkhash也有弊端，就是程序入口文件内容发生改变，那么就算css文件就算内容没有任何改变，由于是该模块发生了改变，css也会重复构建。此时我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里的文件内容发生改变，只要css文件内容不变，就不会重复构建。