Webpack"OTS解析错误"加载字体

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为" http://example.com/assets/ ",使用资产的绝对路径(包括完整的主机名).

问题

问题是Chrome在从动态加载的CSS blob中解析URL时解析的方式.

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

这就是Chrome DevTools中的样子

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

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

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

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

解决方案

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

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

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

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

绝对的URL!

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

运用 extract-text-webpack-plugin

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

Answer 2

作为asnwered 这里通过@mcortesi如果您删除从CSS加载查询sourceMaps的CSS将不使用一滴的建立和数据的URL将被解析罚款

Answer 3

对我来说问题是我的正则表达式.下面做了引导工作的技巧:

{
    test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/,
    loader: 'url-loader?limit=100000'
},

Answer 4

与上面的 @user3006381 一样，我的问题不仅仅是相对 URL，而是 webpack 将文件当作 javascript 文件来放置。他们的内容基本上都是：

module.exports = __webpack_public_path__ + "7410dd7fd1616d9a61625679285ff5d4.eot";

在字体目录中而不是真正的字体中，并且字体文件位于哈希代码下的输出文件夹中。为了解决这个问题，我必须更改 url-loader（在我的例子中是图像处理器）上的测试，以不加载字体文件夹。我仍然必须在 webpack.config.js 中设置 output.publicPath，正如 @will-madden 在他的出色答案中指出的那样。