如何通过 webpack 将版本哈希附加到样式文件?

Question

如何通过 webpack 将版本哈希附加到文件(图像/字体(中？在示例中，我在源代码中有样式：

header.scss

.image__logo {
background-image: url(/assets/images/logo.png);
}

编译后，我需要版本哈希作为文件名的后缀(或者最好查看此文件上次修改的时间戳(：

标头.css

.image__logo {
background-image: url(/assets/images/logo.png?3f5e48a065eb836da00d);
}

我尝试添加加载器，但它不起作用：

{
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=[name].[ext]?[hash]!extract-loader!html-loader'
}

Answer 1

{
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
]
}

Answer 2

我认为问题是文件名模式中的问号，它破坏了查询字符串。尝试通过options显式指定名称，例如：

{
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]"
}
},
{
loader: "extract-loader"
},
{
loader: "html-loader"
}
]
}