Webpack“OTS解析错误"加载字体 [英] Webpack "OTS parsing error" loading fonts

问题描述

我的 webpack 配置指定应使用 url-loader 加载字体，当我尝试使用 Chrome 查看页面时，出现以下错误:

OTS 解析错误:版本标签无效无法解码下载的字体:[我的本地 URL]

我的配置的相关部分如下所示:

<代码>{模块: {装载机: [//...{测试:/.scss$/,加载器:['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],},{测试:/images/.*.(png|jpg|svg|gif)$/,loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',},{测试:/fonts/.*.(woff|woff2|eot|ttf|svg)$/,loader: 'file-loader?name="[name]-[hash].[ext]"',}],},}

它不会在 Safari 中发生，我还没有尝试过 Firefox.

在开发中，我通过 webpack-dev-server 提供文件，在生产中，它们被写入磁盘并复制到 S3；在这两种情况下，我在 Chrome 中都得到了相同的行为.

这也发生在较大的图像上(大于图像加载器配置中的 10kB 限制).

解决方案

TL;DR 通过设置您的 output.publicPath 使用您的资产的绝对路径(包括您的完整主机名)代码>到例如这是 Chrome DevTools 中的样子

这适用于所有作为数据 URI 编码到 CSS 中的图像或字体(即文件的内容嵌入在 CSS 中)，但对于 URL 引用的资产，浏览器必须找到并获取文件.

现在默认情况下 file-loader(url-loader 委托给大文件)将使用 相对 URL 来引用资产 -这就是问题所在！

<块引用>

这些是 file-loader 默认生成的 URL - 相对 URL

当您使用相对 URL 时，Chrome 会相对于包含的 CSS 文件解析它们.通常这很好，但在这种情况下，包含文件位于 blob://... 并且任何相对 URL 都以相同的方式引用.最终的结果是，Chrome 尝试从父 HTML 文件加载它们，并最终尝试将 HTML 文件解析为字体的内容，这显然行不通.

解决方案

强制 file-loader 使用绝对路径，包括协议(http"或https").

更改您的 webpack 配置以包含以下内容:

<代码>{输出: {publicPath: "http://localhost:8080/",//开发服务器//publicPath: "http://example.com/",//生产服务器}}

现在它生成的 URL 将如下所示:

<块引用>

绝对网址！

Chrome 和其他所有浏览器都会正确解析这些网址.

使用extract-text-webpack-plugin

值得注意的是，如果您将 CSS 提取到单独的文件中，则不会出现此问题，因为您的 CSS 将位于正确的文件中并且 URL 将被正确解析.

My webpack config specifies that fonts should be loaded using url-loader, and when I try to view the page using Chrome I get the following error:

OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]

The relevant parts of my config look like this:

{
  module: {
    loaders: [
      // ...
      {
        test: /.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images/.*.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /fonts/.*.(woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader?name="[name]-[hash].[ext]"',
      }
    ],
  },
}

It doesn't happen in Safari, and I haven't tried Firefox.

In development I'm serving files through webpack-dev-server, in production they're written to disk and copied to S3; in both cases I get the same behaviour in Chrome.

This also happens to larger images (greater than the 10kB limit in the image loader config).

解决方案

TL;DR Use absolute paths to your assets (including your complete hostname) by setting your output.publicPath to e.g. "http://example.com/assets/".

The problem

The problem is the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob.

When you load the page, the browser loads your Webpack bundle entry JavaScript file, which (when you're using the style-loader) also contains a Base64 encoded copy of your CSS, which gets loaded into the page.

This is what it looks like in Chrome DevTools

That's fine for all the images or fonts which are encoded into the CSS as data URIs (i.e. the content of the file is embedded in the CSS), but for assets referenced by URL, the browser has to find and fetch the file.

Now by default the file-loader (which url-loader delegates to for large files) will use relative URLs to reference assets - and that's the problem!

These are the URLs generated by file-loader by default - relative URLs

When you use relative URLs, Chrome will resolve them relative to the containing CSS file. Ordinarily that's fine, but in this case the containing file is at blob://... and any relative URLs are referenced the same way. The end result is that Chrome attempts to load them from the parent HTML file, and ends up trying to parse the HTML file as the content of the font, which obviously won't work.

The Solution

Force the file-loader to use absolute paths including the protocol ("http" or "https").

Change your webpack config to include something equivalent to:

{
  output: {
    publicPath: "http://localhost:8080/", // Development Server
    // publicPath: "http://example.com/", // Production Server
  }
}

Now the URLs that it generates will look like this:

Absolute URLs!

These URLs will be correctly parsed by Chrome and every other browser.

Using extract-text-webpack-plugin

It's worth noting that if you're extracting your CSS to a separate file, you won't have this problem because your CSS will be in a proper file and URLs will be correctly resolved.

这篇关于Webpack“OTS解析错误"加载字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！