css - webpack "OTS parsing error"加载字体

Question

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

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

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

{
  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]"',
      }
    ],
  },
}

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

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

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

Answer 1

TL;DR 通过将 output.publicPath 设置为例如，使用 Assets 的绝对路径(包括完整的主机名) “http://example.com/assets/”。

问题

问题在于 Chrome 从动态加载的 CSS blob 解析 URL 时的解析方式。

当您加载页面时，浏览器会加载您的 Webpack 包条目 JavaScript 文件，该文件(当您使用 style-loader 时)还包含 CSS 的 Base64 编码副本，它获取加载到页面中。

This is what it looks like in Chrome DevTools

这对于作为数据 URI 编码到 CSS 中的所有图像或字体来说都很好(即文件的内容嵌入到 CSS 中)，但对于 URL 引用的 Assets ，浏览器必须找到并获取文件。

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

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

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

解决方案

强制 file-loader 使用绝对路径，包括协议(protocol)(“http”或“https”)。

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

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

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

Absolute URLs!

这些 URL 将被 Chrome 和所有其他浏览器正确解析。

使用extract-text-webpack-plugin

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