代码之家 › 专栏 › 技术社区 › meistermuh

webpack问题“可下载字体被杀毒软件拒绝”或“无法解码下载的字体”

webpack-loader loader fonts webpack

meistermuh · 技术社区 · 5 年前

我遇到了一个众所周知的问题,但没有明确的解决方案:webpack的以下设置( 再来一个 ,在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"
                }
            }
        ]
    })

我已经尝试了stackoverflow、github和其他网站上能找到的一切。没有其他装载机( url加载器 ),对 outputPath 或设置 publicPath ,没有其他任何帮助。错误保持不变。导入都很好,因为webpack没有编译错误。没有webpack配置的这一部分,一切都很好。Web服务器正确提交了文件,并访问了文件的URL,直接下载了有效的字体文件。因此,这条路和其他一切似乎都很好。那么……这里出了什么问题?

这些问题出现在Firefox、Chrome和Edge(各为最新版本)中。

你知道怎么解决这个问题吗?

0 回复 | 直到 5 年前

meistermuh 4 年前

在尝试了很多我在网上找到的解决方案后,这似乎是适合我的:

.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] 以及简单地忽略哈希(如我的问题中给出的)。其中一个缩短的成功了,其他的失败了。其他配置(不同的加载器或插件)根本没有帮助。然后,我偶然设置了完整的哈希值,然后。。。巴津加!所以,最后,我不知道所有这些失败的真正原因,但至少我现在知道如何解决这个问题:只需告诉webpack通过保留完整的哈希值来复制和重命名文件,就是这样。

推荐文章

Joseph · 在Angular 4中单击Cancel(取消)时,在中卸下加载器

7 年前

sy0 · Pytork的二进制输入

7 年前

Rahul · webpack3:您可能需要适当的加载程序来处理此文件

7 年前

Abd EL Magied · 尝试在空对象[重复]上调用虚方法

8 年前

Héctor León · React的网页3图像src问题(html加载程序和transform React jsx img导入)

8 年前

Adolf Dsilva · Android Loaders onLoadFinished()立即调用

8 年前

CrazySynthax · 如何在Javascript中创建等待函数结束的加载程序?

9 年前

intercoder · foo之间的差异。join和foo。决定在webpack中

9 年前

necroface · React-模块分析失败

9 年前

Niello · 从C中的另一个对象初始化对象++

9 年前