作用:版本管理 Hash:和整个项目的构建有关,只要项目文件有修改,整个项目构建的 hash 值就会更改 Chunkhash:和 webpack 打包的 chunck 有关,不同的 entry 会生成不同的 chunckhash 值 Contenthash:根据文件内容来定义 hash,文件内容不变,则 contenthash 不变
占位符:
新建 webpack.prod.js mode 设置为 production 时,热更新插件 webpack-dev-server 不可用。
module.exports = {
output: {
path: path.join(__dirname, "dist"),
filename: "[name]_[chunkhash:8].js", // 生成文件指纹
},
};
若为 css 文件生成文件指纹 style-loader 和 mini-css-extract-plugin 功能互斥
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
// "style-loader", // 在打包时把 css 放入 style 中插入 html 的 head 中
MiniCssExtractPlugin.loader,
"css-loader"
],
}
]
},
plugins: [
new MiniCssExtractPlugin({ // mini-css-extract-pluginn 在打包时把 css 提取成单独文件
filename: '[name]_[contenthash:8].css'
})
]
};