Question

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

header.scss

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

编译后，我需要一个版本哈希作为文件名的后缀（或者最好查看该文件的最后修改时间戳）：

header.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

我认为问题是文件名模式中的问号，它打断了查询字符串。尝试通过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"
        }
    ]
}

Answer 2

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

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

2 个答案: