文件指纹策略

什么是文件指纹?
打包后输出的文件名的后缀
文件指纹策略
文章图片

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

    推荐阅读