webpack 中的 hash、chunkhash、contenthash 区别

[suukii]

hash 一般是结合 CDN 缓存来使用的，文件内容改变会导致生成文件名中的 hash 值改变，也就是对应的 HTML 引用的 URL 地址会改变，这样就能触发 CDN 服务器从源服务器上拉取新的资源，更新缓存。

不过这几种 hash 计算有以下区别：

1. hash: 跟整个项目的构建有关，只要项目中有文件更改，hash 值就会改变，在项目构建中全部文件都用同一个 hash 值

2. chunkhash: 第一个 hash 计算方式根本就达不到缓存的效果，所以我们需要换一种。 chunkhash 是根据不同的入口文件(entry)进行依赖文件解析、构建对应的 chunk、生成对应的 hash 值。所以我们可以把公共库和程序的入口文件分开，各自打包构建，采用 chunkhash 方式生成不同的 hash 值，这样只要我们不改动公共库的代码，它们的 hash 值就不会变。

3. contenthash: 即使是使用 chunkhash 的方式，按入口文件分开生成了 hash，但在同一个入口中，如果一个模块改变了，跟它有依赖关系的模块也会受到影响。这些模块即使没有发生改变，但还是要重复构建，生成新的 hash 值。这时，我们可以使用 extra-text-webpack-plugin 里面的 contenthash 值，来保证只要某个模块的内容不变，它所处的模块中其他文件的变化不会导致它重复构建。