简单说下webpack中的文件指纹策略
Opened this issue · 1 comments
Cosen95 commented
简单说下webpack中的文件指纹策略
Cosen95 commented
文件指纹对应的其实就是hash
:
Hash
:和整个项目的构建相关,只要项目文件有修改,整个项目构建的 hash 值就会更改Chunkhash
:和 webpack 打包的 chunk 有关,不同的 entry 会生成不同的 chunkhash 值Contenthash
:根据文件内容来定义 hash,文件内容不变,则 contenthash 不变
来看下这三种 hash 在 webpack 里面怎么配置:
module.exports = {
entry: {
app: "./src/app.js",
info: "./src/info.js",
},
output: {
filename: "[name][chunkhash:8].js",
path: __dirname + "/dist",
},
plugins: [
new MiniCssExtractPlugin({
filename: `[name][contenthash:8].css`,
}),
],
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "img/[name][hash:8].[ext]",
},
},
],
},
],
},
};
- JS 文件指纹设置:设置 output 的 filename,使用[chunkhash]
- CSS 文件指纹设置:设置 MiniCssExtractPlugin 的 filename,使用[contenthash]
- 图片文件指纹设置:设置 file-loader 的 name,使用[hash]
占位符名称 | 含义 |
---|---|
[ext] | 资源后缀名 |
[name] | 文件名称 |
[path] | 文件的相对路径 |
[folder] | 文件所在的文件夹 |
[contenthash] | 文件的内容 hash,默认是 md5 生成 |
[hash] | 文件内容的 Hash,默认是 md5 生成 |
[emoji] | 一个随机的指代文件内容的 emoj |