Webpack 5中如何为asset/resource类型资源使用全局compilation hash

问题根因 #

Webpack 5 中不同占位符的作用域存在差异：

• Chunk 命名配置中的[hash]默认指向全局compilation的统一编译哈希
• Asset 模块命名中的[hash]默认指向单个资源自身的内容哈希，所以每个资源会生成独立的哈希值

解决方法 #

把assetModuleFilename配置中的[hash]替换为[fullhash]即可，[fullhash]是Webpack 5提供的全局编译哈希的显式占位符，在所有模块类型中都指向同一个全局compilation哈希值。

修改后的配置参考：

output: {
  filename: '[name].[hash][ext]',
  chunkFilename: '[name].[hash][ext]',
  publicPath: './dist/',
  path: path.resolve(__dirname, 'dist'),
  // 替换[hash]为[fullhash]
  assetModuleFilename: 'assets/[name].[fullhash][ext]'
}

如果只需要给指定类型的Asset资源应用全局哈希，也可以在对应模块规则中单独配置生成文件名，优先级高于全局assetModuleFilename：

module: {
  rules: [
    {
      test: /\.(eot|woff|woff2|ttf|png|jpg|gif|svg|ico)$/,
      type: 'asset/resource',
      generator: {
        filename: 'assets/[name].[fullhash][ext]'
      }
    }
  ]
}

注意事项 #

使用[fullhash]后，只要项目中任意文件内容发生修改，所有资源的哈希都会同步更新，全量缓存失效，适合需要全版本统一更新的场景。如果希望资源只在自身内容修改时更新哈希，还是建议使用默认的内容哈希配置。

内容的提问来源于stack exchange，提问作者jurgen w