一般指的是打包后输出的文件名的后缀。

文件指纹如何生成？

  • Hash: 和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改。
  • Chunhash: 和webpack 打包的chunk有关，不同的entry会生成不同的chunkhash值。
  • Contenthash: 根据文件内容来定义hash，文件内容不变，则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文件的文件指纹设置


对于css文件，我们使用 contenthash

设置 MiniCssExtractPlugin 的 filename

module.exports = {
	entry:{
		app:'./src/app.js',
		search:'./src/search.js'
	},
	output:{
		new MiniCssExtractPlugin({
			filename: `[name][contenthash:8].css`
		})
	}
}

图片的文件指纹设置


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

const path = require('path');

module.exports = {
	entry: './src/index.js',
	output:{
		filename: 'bundle.js',
		path:path.resolve(__dirname,'dist')
	},
	module:{
		rules:[
			{
				test:/\.(png|svg|jpg|gif)$/,
				use:[{
					loader:'file-loader',
					options:{
						name:'img/[name][hash:8].[ext]'
					}
				}]
			}
		]
	}
}

为了将css独立出来


安装 mini-css-extract-plugin 插件


与style-loader插件互斥，因为 mini-css-extract-plugin为了将css样式提取出来，而style-loader则为了将样式写入header中。