在Webpack 5中对资产/资源文件使用编译散列

Question

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

例如，主包文件都是正确的:

appbundle.42cf6539b0e35868deab.js

polyfillsbundle.42cf6539b0e35868deab.js

等。

但是，assets文件夹中的图像看起来是这样的，带有不同的散列。是否有一种方法可以让它们像bundle块一样匹配编译散列?

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向单独的文件发出资源。
当你使用散列占位符,Webpack会生成一个散列的文件名。因为你有不同的文件名~比;不同的哈希表。

如果你想为你的资源添加一些随机后缀，我会这样做:

const seed = new Date().getTime() // or your generation strategy
module.exports = {
. . .
output:
{
. . .
assetModuleFilename: `assets/[name].${seed}[ext]`
}
...