webpack5 学习 6 -- 文件指纹

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

修改 js， css 的 hash 没必要改变，这个时候使用 contenthash

JS 的文件指纹设置

设置 output 的 filename， 使用 chunkhash

output: {
        path: path.resolve(__dirname,'dist'),
        
        filename: '[name]_[chunkhash:8].js'
    },

CSS 的文件指纹设置

设置 MiniCssExtractPlugin 的 filename， 使用 contenthash

MiniCssExtractPlugin 会将 style-loader 里的 css 提取出来，生成一个独立的 css 文件，插入到 头部

module: {
    rules: [
      {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // 这里就不能再使用 style-loader 了，因为 style-loader 不会提取 css 成为一个独立的 .css 文件
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
    ]
},
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css' // 这里使用 contenthash
        })
    ],

图片的文件指纹设置

设置 file-loader 的 name， 使用 hash

占位符名称	含义
[ext]	资源后缀名
[name]	文件名称
[path]	文件的相对路径
[folder]	文件所在文件夹
[hash]	文件内容的 Hash，默认是 md4 生成
[contenthash]	文件内容的 Hash，默认是 md4 生成

{
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    // {
                 //     test: /\.(png|jpg|jpeg|gif)$/,
                 //     use: [
                 //         {
                 //             loader: 'file-loader',
                 //             options: {
                 //                 name: '[name]_[hash:8].[ext]'
                 //             }
                 //         }
                 //     ]
                 // },
                 {
                  test: /\.(png|jpg|jpeg|gif)$/,
                  use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]',
                            limit: 1024 * 10
                        }
                    }
                ]
            },
                ]
                
}

这里我们还可以使用 webpack 的 assets module：

{
                test: /\.(png|jpg|jpeg|gif)$/,
                type: 'asset',
                generator: {
                    filename: '[name]_[hash][ext][query]',  
                  },
                  parser: {
                    dataUrlCondition: {
                      maxSize: 4 * 1024 // 4kb
                    }
                  }
            },

字体资源

{
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            }

或者

{
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                type: 'asset/resource',
                generator: {
                    filename: '[name]_[hash][ext]',  
                  },
            }