Open Cosen95 opened 4 years ago
文件指纹对应的其实就是hash:
hash
Hash
Chunkhash
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]
文件指纹对应的其实就是
hash
:Hash
:和整个项目的构建相关,只要项目文件有修改,整个项目构建的 hash 值就会更改Chunkhash
:和 webpack 打包的 chunk 有关,不同的 entry 会生成不同的 chunkhash 值Contenthash
:根据文件内容来定义 hash,文件内容不变,则 contenthash 不变来看下这三种 hash 在 webpack 里面怎么配置:
JS 文件指纹设置:设置 output 的 filename,使用[chunkhash]
CSS 文件指纹设置:设置 MiniCssExtractPlugin 的 filename,使用[contenthash]
图片文件指纹设置:设置 file-loader 的 name,使用[hash]