webpack中的hash、chunkhash、contenthash区别

[funnycoderstar]

hash, chunkhash, contenthash

hash: 构建生成的文件hash值都是一样的，所以hash计算是跟整个项目的构建相关，同一次构建过程中生成的hash都是一样的。
hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。

main.abcdefg.css
index.abcdefg.js
main.abcdefg.js

chunkhash:
采用 hash计算的话，每一次构建后生成的 哈希值 都不一样，即使文件内容压根没有改变，这样子是没办法实现缓存效果的，我们需要换另一种哈希值计算。
chunkhash是根据不同的入口文件（entry）进行依赖文件解析、构建对应的chunk，生成对应的 哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

contenthash
index.css被index.js引用了，所有有相同的 chunkhash值，但是这样子有个问题，如果index.js更改了代码，css文件就算内容没有任何改变，由于是该模块发生了变化，导致css文件会重复构建。
这个时候，我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建。

[hash]: 根据所有chunk 生成的hash值，也就是每次打包的时候会生成统一唯一的[hash]值，并且某个chunk修改后，hash值都会变,不利于持续缓存
一般的配置：
字体文件，图像文件用file-loader或者url-loader生成的[hash]（url-loader是file-loader的加强版，可以通过设置limit的大小，把小图标转化成base64）
css 用extract-text-webpack-plugin插件根据样式文件生成的 contenthash值js
用webpack生成的chunkhash值

webpack中的hash、chunkhash、contenthash区别