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

问题描述

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

  OTS解析错误：无效的版本标签
无法解码下载的字体：[我的本地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; 
 
 
 
这种情况也会发生在更大的图片上（大于图片加载器配置中的10kB限制）。
解决方案
  TL; DR 使用您的资产的绝对路径（包括完整的主机名），方法是设置 output.publicPath 更改为eg  
这是Chrome DevTools中的样子
 
 
对于所有图片或字体作为数据URI（即，文件的内容嵌入在CSS中）编码到CSS中，但是对于由URL 引用的资源，浏览器必须找到并获取文件。
 
 
 
现在默认情况下 file-loader （其中 url-loader 对于大文件）会使用相对的网址来引用资源 - 和就是这个问题！ 
 
 
  
 这些是由 file-loader  URL 
 
 
当您使用相对URL时，Chrome会相对于包含的CSS文件解析它们。通常很好，但在这种情况下，包含文件在 blob：// ... ，任何相对URL都以相同的方式引用。最终结果是Chrome尝试从父HTML文件加载它们，并最终尝试将HTML文件解析为字体的内容，这显然不起作用。
 
 
 
解决方案
 
 
 
强制 file-loader 使用绝对路径，或https）。
 
 
 
更改您的webpack配置以包含等同于：
  {
 output：{
 publicPath：http：// localhost：8080 /，//开发服务器
 // publicPath：http://example.com /，//生产服务器
} 
} 
  
它会生成如下：
 
 
  
 绝对网址
 
 
这些网址将由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屋！