关于前端:文件指纹策略

什么是文件指纹？

打包后输入的文件名的后缀

文件指纹罕用于做文件版本的治理，我的项目公布的时候，有些文件批改了，只须要公布批改的文件，另外设置了文件指纹，对没有批改的文件能够应用本地的缓存，减速页面的拜访。

文件指纹如何生成？

Hash:和整个我的项目的构建相干，只有我的项目文件有批改，整个我的项目构建的hash值会批改。有一个文件发生变化，那么所有的文件都会从新构建。如果2个页面，批改了A页面的js，那么B页面的js也会发生变化。这其实是没有必要的。
ChunkHash:和webpack打包的chunk无关。不同的entry会生成不同的chunkhash值，如果A页面发生变化，那么只有从新构建A，不会从新构建B页面。
ContentHash:依据文件内容来定义hash，文件内容不变，则contenthash不变。如果咱们批改了js文件，没有批改css文件，如果应用chunkHash，那么css文件依然会变，所以应用ContentHash。

实际

Js的文件指纹设置
设置output的filename，应用[chunkhash]

module.exports = {  entry: {    app: './src/app.js',    search: './src/search.js'  },  output: {    filename: '[name][chunkhash:8].js',    path: __dirname + '/dist'  }}

css文件指纹设置
设置MiniCssExtractPlugin的filename，应用[contenthash]

咱们如果应用了style-loader和css-loader，css会由style-loader将css插入到style外面放入head头部，这时没有一个独立的css文件，因而这时应用一个MiniCssExtractPlugin将其提取成一个独立的文件。

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

图片的文件指纹设置

设置file-loader的name，应用[hash]。

这里的hash和js里的hash是不太一样的，这里的hash也是指文件内容的hash，文件内容的hash是采纳md5生成的。

module.exports = {  module: {    rules: [      {test: /\.(png|svg|jpg|gif)$/, use: [{        loader: 'file-loader',        options: {name: 'img_[name][hash:8].[ext]'}      }]}    ]  }}