webpack基础用法（4）：文件指纹策略和压缩

1 文件指纹策略

文件指纹是指打包后输出的文件名的后缀
指纹策略：

• Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改
• Chunkhash：和 webpack 打包的 chunk 有关， 不同的 entry 会生成不同的 chunkhash 值
• Contenthash：根据文件内容来定义hash，文件内容不变，则 contenthash 不变

1.1 JS的文件指纹设置

设置 output 的 filename，使用 [chunkhash]

module.exports = {
   
    ...,
    output: {
   
        ...,
        filename: '[name][chunkhash:8].js'
    },
    ...
}

1.2 CSS的文件指纹设置

设置 MiniCssExtractPlugin（将css提取成独立的文件）的 filename, 使用[contenthash]

1.2.1 安装插件

npm i mini-css-extract-plugin -D

1.2.2 配置

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module.exports = {
   
    ...,
    module: {
   
        rules: [
            ...,
            {
   test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader']},
			...
        ]
    },
    plugins