Skip to the content.

webpack 中 hash、chunkhash、contenthash 的区别?

文件名称使用 hash 值,是为了每次打包之后生成不同名称的文件,避免被浏览器缓存策略识别为相同文件,导致更新失败。 hash 值的参数有三种,他们有什么区别呢?

hash 一般是结合 CDN 缓存来使用,通过 webpack 构建之后,生成对应文件名自动带上对应的 MD5 值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的 HTML 引用的 URL 地址也会改变,触发 CDN 服务器从源服务器上拉取对应数据,进而更新本地缓存

hash

hash 是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的 hash 值都会更改,并且全部文件都共用相同的 hash 值。

chunkhash

显然,chunkhsah 是和 chunk 相关的,只要 chunk 内容没有发生变化,其 hash 值就不会变。相同 chunk 构建出来的 css 和 js 使用相同的 hash。

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

contenthash

在 chunkhash 的例子,我们可以看到由于 index.css 被 index.js 引用了,所以共用相同的 chunkhash 值。但是这样子有个问题,如果 index.js 更改了代码,css 文件就算内容没有任何改变,由于是该模块发生了改变,导致 css 文件会重复构建。

这个时候,我们可以使用extra-text-webpack-plugin里的 contenthash 值,保证即使 css 文件所处的模块里就算其他文件内容改变,只要 css 文件内容不变,那么不会重复构建。

返回首页