webpack 问题 "downloadable font rejected by sanitizer" 或 "failed to decode downloaded font"

Question

我运行遇到了一个众所周知的问题，但是没有明确的解决方案：以下 webpack 设置（encore，在 Symfony 中）产生错误 downloadable font: rejected by sanitizer ... 在 Firefox 中，failed to decode downloaded font 在 Edge 中用于某些（不是全部！）@fontawesome 字体和 IPM Plex Mono（我通过 npm 安装）

.addLoader(
    {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: "[name].[ext]",
                    outputPath: "./fonts"
                }
            }
        ]
    })

我已经尝试了在 Whosebug、github 和其他网站上可以找到的所有内容。不是另一个加载程序（url-loader），outputPath 的修改或设置 publicPath，也没有其他任何帮助。错误保持不变。导入都很好，因为 webpack 没有编译错误。没有这部分 webpack 配置，一切都很好。网络服务器正在正确提交文件并访问 URL 以直接下载有效的字体文件。因此，路径和其他任何东西似乎都可以。那么...这里有什么问题吗？

问题出现在 Firefox、Chrome 和 Edge（每个都是最新版本）中。

知道如何解决这个问题吗？

Answer 1

在尝试了很多网上找到的几种解决方案之后，这似乎是适合我的解决方案：

.copyFiles({
    from: './assets/images',
    to: 'images/[path][name].[hash].[ext]',
})
.configureFilenames({
    images: 'images/[name].[hash].[ext]',
    fonts: 'fonts/[name].[hash].[ext]',
})

说明：webpack 当然要从供应商那里复制文件。通过这样做，它在大多数情况下都失败了，因为哈希中的错误（我猜）。 swapping/adding 哈希值未正确更改某些供应商文件中的 URL。至少这是我的猜测。我尝试了 [hash:6] 和 [hash:8] 以及简单地忽略哈希（如我的问题中给出的那样）。其中一个缩短的成功了，其他的都失败了。其他配置（不同的加载器或插件）根本没有帮助。然后我偶然设置了完整的散列和... bazinga！所以，最后，我不知道所有失败的真正原因，但至少我现在知道如何解决问题：只需告诉 webpack 通过保留完整的哈希来复制和重命名文件，就是这样。

webpack 问题 "downloadable font rejected by sanitizer" 或 "failed to decode downloaded font"

webpack issue "downloadable font rejected by sanitizer" or "failed to decode downloaded font"

fonts

loader

webpack

webpack-loader