4

我遇到了一个众所周知的问题，但是没有明确的解决方案：以下 webpack 设置（encore，在 Symfony 中）downloadable font: rejected by sanitizer ...在 Firefox 和failed to decode downloaded fontEdge 中为某些（不是全部！）@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"
                }
            }
        ]
    })

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

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

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

4

1 回答 1

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 通过保留完整的哈希来复制和重命名文件，仅此而已。

于 2020-11-04T15:43:16.677 回答