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

Question

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

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

appbundle.42cf6539b0e35868deab.js

polyfillsbundle.42cf6539b0e35868deab.js

ETC..

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

image1.ec620b3ff0d269c77f1b.svg

image2.984ca5bc273b4992cb6c.svg

ETC..

相关的 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]`
        }
      ...