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

我的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限制).

1> Will Madden..：

---

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将得到正确解析.

---

谢谢我从你的答案中找到了我的SPA页面重新加载问题的原因.只需注意`publicPath:'/',`也可以

---

@benoror对于不使用`style-loader`的部署来说这不是问题,因为CSS将从单独的CSS文件提供,Chrome将能够正确解析资产URL.所以你应该可以在例如staging,test,QA环境中使用,你可以在某处部署应用程序并提取CSS.但是如果你有很多开发环境,那可能就是个问题.在我们的团队中,至少我们只需在本地运行一次dev服务器,然后从中进行操作.这不太理想,我不得不通知我的队友有关配置的更改,但它并没有真正影响我们.

---

实际上这个解决方案并没有解决我的环境问题.无论如何要将整个webpack配置和scss(相关块)上传到CodePen？谢谢!

2> 小智..：

---

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

3> 小智..：

---

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

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