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

在webpack中有时需要使用hash来实现静态资源增量更新。

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

实际使用时，文件名的hash值可以有三种生成方式，这三种hash计算还是有一定区别，每一种都有不同应用场景，那么三者有何区别呢？

hash

hash是跟整个项目的构建相关，每次构建均会重新获取hash值（使本地缓存失效），同一次构建过程中生成的文件hash值都是一样的。
在这里插入图片描述

chunkhash

采用hash计算的话，每一次构建后生成的hash值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要另一种hash值计算方法，即chunkhash。

chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。我们在生产环境由于采用chunkhash，所以项目主入口文件main.js及其对应的依赖文件main.css被打包在同一个模块，共用相同的chunkhash（本示例为app.*.js）.但是公共库由于是不同的模块，所以有单独的chunkhash（本示例为vendor.*.js）。这样子就保证了在线上构建时只要文件内容没有更改就不会重复构建。

  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }

最后打包结果如下图所示：
在这里插入图片描述

contenthash

contenthash表示由文件内容产生的hash值，内容不同产生的contenthash值也不一样。

在vue2 webpack3项目中，使用extract-text-webpack-plugin插件通常做法是把项目中css都抽离出来合并为一个css文件来加以引用。目前测试情况是只要项目vue文件代码发生变化，contenthash均会发生变化。

在vue3 webpack4项目中，使用mini-css-extract-plugin插件将CSS提取为独立的文件，对每个包含css的vue文件都会创建一个CSS文件，支持按需加载css和sourceMap。目前测试情况是当前vue页面有修改，则编译后对应的css和js文件hash值均会发生变化。
在这里插入图片描述