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限制)。
解决方法
问题
问题是，当从动态加载的CSS blob解析时，Chrome解析网址的方式。
当您加载页面时，浏览器加载您的Webpack包条目JavaScript文件，(当您使用style-loader)也包含您的CSS的Base64编码副本，它被加载到页面。
07001
This is what it looks like in Chrome DevTools
这对于编码到CSS中作为数据URI(即，文件的内容嵌入在CSS中)的所有图像或字体都很好，但是对于由URL引用的资产，浏览器必须找到并获取文件。
现在默认情况下，文件加载器(url-loader委托给大型文件)将使用相对的URL来引用资源 – 这就是问题！
07002
These are the URLs generated byfile-loaderby default – relative URLs
当您使用相对网址时，Chrome会相对于包含的CSS文件解析它们。通常很好，但在这种情况下，包含文件是在blob：// …和任何相对URL以相同的方式引用。最终结果是Chrome尝试从父HTML文件加载它们，并最终尝试将HTML文件解析为字体的内容，这显然不会工作。
解决方案
强制文件加载器使用包括协议(“http”或“https”)的绝对路径。
更改您的webpack配置以包括等同于：
{
output: {
publicPath: "http://localhost:8080/",// Development Server
// publicPath: "http://example.com/",// Production Server
}
}
现在，其生成的网址将如下所示：
07003
Absolute URLs!
这些网址将由Chrome和其他所有浏览器正确解析。
使用extract-text-webpack-plugin
值得注意的是，如果你提取你的CSS到一个单独的文件，你不会有这个问题，因为你的CSS将在一个正确的文件和URL将正确解决。
