在 Webpack 5 中对资产/资源文件使用编译哈希

Question

我正在尝试将编译哈希用于资产/资源文件名，但无论我尝试什么，它只会为资产/资源输出中的每个文件生成不同的哈希。块文件名都得到相同且正确的编译哈希。

例如，主要的bundle文件都是正确的：

appbundle.42cf6539b0e35868deab.js

polyfillsbundle.42cf6539b0e35868deab.js

等等。

但是，资产文件夹中的图像看起来像这样，具有不同的哈希值。有没有办法让它们像捆绑块一样匹配编译哈希？

image1.ec620b3ff0d269c77f1b.svg

image2.984ca5bc273b4992cb6c.svg

等等。

相关的 webpack 配置：

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

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

Answer 1

但是你想要达到什么目的呢？

您将获得每个图像文件的新哈希，因为使用 asset/resource 您要求 Webpack 将资源发送到单独的文件。
当你使用 [hash] 占位符时，Webpack 会从文件名中生成一个散列。因为你有不同的文件名~> 不同的哈希值。

如果您想为每个构建添加一些随机后缀到您的资源中，我会这样做：

const seed = new Date().getTime() // or your generation strategy

module.exports = {
. . .
output:
        {
            . . .
            assetModuleFilename: `assets/[name].${seed}[ext]`
        }
      ...