简单说下webpack中的文件指纹策略 about fe_interview HOT 1 OPEN

Cosen95 commented on June 4, 2024

简单说下webpack中的文件指纹策略

from fe_interview.

Comments (1)

Cosen95 commented on June 4, 2024

文件指纹对应的其实就是hash：

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

占位符名称	含义
[ext]	资源后缀名
[name]	文件名称
[path]	文件的相对路径
[folder]	文件所在的文件夹
[contenthash]	文件的内容 hash，默认是 md5 生成
[hash]	文件内容的 Hash，默认是 md5 生成
[emoji]	一个随机的指代文件内容的 emoj