文件指纹

三种hash

|

名称

|

作用

| | —- | —- | | hash | 每次webpack打包会有一个hash值，文件后缀可以赋值这个hash | | | 会根据chunk生成的hash，如果打包源来自同一个chunk，那么chunkhash就会一样 | | | 只要文件发生了改变，整个项目的hash就会发生改变 | | chunkhash | 会根据chunk生成的hash，如果打包源来自同一个chunk，那么chunkhash就会一样 | | | 不同的entry会生成不同的chunkhash | | contenthash | 文件内容改变就会改变conenthash |

占位符名称

|

占位符名称

|

描述

| | —- | —- | | [ext] | 资源后缀名 | | [name] | 文件名称 | | [path] | 文件的相对路径 | | [folder] | 文件所在的文件夹 | | [contenthash] | 文件内容的hash | | [chunkhash] | chunk组的hash | | [hash] | 打包的hash | | [emoji] | emoji |

具体资源hash使用

js文件指纹 [chunkhash:8]

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

css文件指纹 [contenthash:8]

 new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' }),

png/images[hash:8]

这个hash就是指的是文件内容的hash，默认是md5生成的

  module: {
    rules: [
      {
        test: /\.(png|svg|gif|jpe?g)$/,
        type: 'asset',
        generator: {
          filename: 'img/[name].[hash:8][ext]',
        },
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024,
          },
        },
      },
    ],
  },

html

 new htmlWebpackPlugin({
      template: 'publish/index.html',
      filename: 'index.html',
      chunks: ['app'],
 }),