Webpack：文件指纹的最佳使用

为什么要有文件指纹

当我们项目上线的时候，可能会经过多个版本的迭代。但是由于线上代码是有缓存的，如果迭代版本以上一个版本的文件名相同，则可能会导致即便我们上线了新功能而线上显示的还是老的功能，让我们的新特性无法展现。出于这个原因，在工程化过程中对文件根据某一规则得出hash值作为文件名，这样当版本迭代的时候，文件的hash值也会跟着发生变化就就可以去请求新代码而不使用旧代码。

hash

hash的生成和整个项目的构建相关，所有模块的hash值相同，只要项目文件有修改，整个项目构建的hash就会更改。整个项目的构建过程是通过compiler和compilation来启动的，启动webpack会实例化出一个compiler实例，每次构建会生成一个compilation实例，hash的生成受到了compilation的影响。

注：hash的这种方式是不推荐的，因为所有的文件都会受到项目整体构建的影响，也就是说当只有一个文件变化的时候，其余的文件的hash也会跟着改变，很容易破坏线上缓存。

module.exports = {
  output: {
    path: resolve('dist'),
    filename: '[name]-[hash:8].js',
  },
}

chunkhash

在webpack中每一个入口文件会生成一个chunk，分包也会生成一个chunk，一个chunk是由多个module组合而成。chunkhash的生成就和webpack打包过程中生成的chunk有关，不同的chunk会生成不同的chunkhash。

module.exports = {
output: {
    path: resolve('dist'),
    filename: '[name]-[chunkhash:8].js',
  },
}

注：chunkhash可以在JavaScript文件上使用，由webpack打包出来，一个chunk就代表着一个产出文件。

contenthash

contenthash是根据文件的内容来定义hash值，当文件的内容改变的时候，hash值才会改变，当文件的内容不变的时候hash值不会发生变化。

注：contenthash可以在css文件上使用，css文件也会存在chunk中，一般构建都是需要把css文件分离处理。如果使用chunkhash的话，当JavaScript文件发生改变而css文件未发生改变的时候css文件同样会改变，因此使用contenthash让css文件根据自己的内容作出hash值，不会受到其它因素的影响。

module.exports = {
    plugins:[
           new MiniCssExtractPlugin({
                  filename: '[name]_[contenthash:8].css'
           }),
    ]
}

图片文件的hash

当使用file-loader解析图片的时候一般在filename上会使用[hash]来对图片资源做一个hash，这个hash和上面三种hash则不同，这个hash是纯粹通过MD5生成的

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[name]_[hash:8].[ext]',
        },
      },
    ],
  },
};

hubvue / webpack-learn