文件指纹策略前端

什么是文件指纹？
打包后输出的文件名的后缀

文章图片

文件指纹常用于做文件版本的管理，项目发布的时候，有些文件修改了，只需要发布修改的文件，另外设置了文件指纹，对没有修改的文件可以使用本地的缓存，加速页面的访问。
文件指纹如何生成？
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生成的。

占位符名称	含义
[ext]	资源后缀名
[name]	文件名称
[path]	文件的相对路径
[folder]	文件所在的文件夹
[contenthash]	文件的内容hash，默认是md5生成
[hash]	文件内容的hash，默认是md5生成
[emoji]	一个随机的指代文件内容的emoji

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