webpack 文件指纹
2020-08-18 本文已影响0人
刘员外__
优点：
- 用作版本管理时，如果一个项目需要发布，只需要发布修改过的文件指纹；
- 对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存好的，无需二次加载，加速页面访问。
如何生成文件指纹
Hash |
和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会随之更改 |
Chunkhash |
和webpack打包的chunk有关，不同的entry会申城不同的chunkhash值 |
Contenthash |
根据文件内容来定义hash，文件内容不变，则contenthash不变 |
| 占位符名称 | 定义 |
|---|---|
[ext] |
资源后缀名 |
[name] |
文件名称 |
[path] |
文件的相对路径 |
[folder] |
文件所在的文件夹 |
[contenthash] |
文件的内容hash，默认是md5生成 |
[hash] |
文件的内容hash，默认是md5生成 |
[emoji] |
一个随机的指代文件内容的emoji |
JS文件指纹设置
设置output的 filename，使用 [chunkhash]
chunkhash使用的是md5加密，hash值长度为32位，[chunkhash:8]表示取hash值的前8位
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js'
},
CSS文件指纹设置
需要先使用MiniCssExtractPlugin将css提取成独立的文件，然后使用[contenthash]设置文件指纹
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
// 把css提取成单独的文件
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
})
]
注意：style-loader的作用是把样式插入到head里面，而MiniCssExtractPlugin插件的功能是把样式提取成独立的文件，所以MiniCssExtractPlugin插件的loader无法与style-loader一起使用，因为他们的功能是互斥的，会有一些冲突。
{
test: /.css$/,
use: [
// 'style-loader', 需要删掉原有的style-loader
MiniCssExtractPlugin.loader,
'css-loader'
]
},
图片的文件指纹设置
设置file-loader的name，使用[hash]
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]'
}
}
]
},
