文件指纹

129 阅读1分钟

作用:版本管理 Hash:和整个项目的构建有关,只要项目文件有修改,整个项目构建的 hash 值就会更改 Chunkhash:和 webpack 打包的 chunck 有关,不同的 entry 会生成不同的 chunckhash 值 Contenthash:根据文件内容来定义 hash,文件内容不变,则 contenthash 不变

占位符:

image.png

新建 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'
        })
    ]
};