webpack问题："可下载字体被净化器拒绝"或"下载的字体解码失败"

Question

我遇到了一个众所周知的问题，然而它并没有清晰的解决方案：webpack（在Symfony中使用encore）的以下设置会导致Firefox中出现错误downloadable font: rejected by sanitizer ...，在Edge中出现错误failed to decode downloaded font，这发生在某些（而非全部！）@fontawesome字体和我通过npm安装的IPM Plex Mono上。

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

我已经尝试了stackoverflow、github和其他网站上的所有方法，包括不使用url-loader，修改outputPath或设置publicPath，以及其他的任何方法都无济于事，错误依然存在。由于webpack没有编译错误，所以导入的内容全部正确。如果没有这部分webpack配置，一切都很好。Web服务器可以正确地提交文件，并且直接访问URL可以下载有效的字体文件。因此路径和其他一切似乎都没问题。那么……这里出了什么问题呢？

问题在Firefox、Chrome和Edge（各自的最新版本）中都出现。

您有什么解决办法吗？

- meistermuh

Answer 1

在尝试了许多在线解决方案后，我发现这似乎是适合我的一个：

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

解释：webpack必须从供应商处复制文件。但是，由于哈希（我猜测）中的错误，在大多数情况下都失败了。某些供应商文件内部的URL没有正确更改，无法正确交换/添加哈希。至少这是我的猜测。我尝试使用[hash:6]和[hash:8]以及忽略哈希（如我的问题所述）。其中一个缩短的成功了，其他的失败了。其他配置（不同的加载器或插件）也没有起到任何帮助作用。然后我只是碰巧设置了完整的哈希...bazinga！最终，我不知道所有失败的真正原因，但至少我现在知道如何解决问题：只需告诉webpack通过保留完整的哈希来复制和重命名文件即可。

- meistermuh