Webpack“OTSparsing错误”加载字体
我的webpackconfiguration指定应该使用url-loader加载字体，当我尝试使用Chrome查看页面时，出现以下错误：
OTS parsing error: invalid version tag Failed to decode downloaded font: [My local URL]
我的configuration的相关部分如下所示：
{ 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中获得相同的行为。
这也发生在较大的图像上（大于图像加载器configuration中的10kB限制）。
TL; DR通过将output.publicPath设置为例如“ http://example.com/assets/ ”，使用绝对path到您的资产（包括您的完整主机名）。
问题
问题就在于Chrome从dynamic加载的CSS blob中parsing出来的方式。
当你加载页面时，浏览器会加载你的Webpack绑定条目JavaScript文件，当你使用style-loader时候，它也包含了你的CSS的一个Base64编码的副本，它将被加载到页面中。
这是在Chrome DevTools中的样子
对于所有以CSSforms编码到CSS中的图像或字体（即文件的内容embedded在CSS中）来说，这是正确的，但对于由URL引用的资源，浏览器必须find并获取文件。
现在默认情况下， file-loader （ url-loader委托给大文件）将使用相对 URL来引用资源 – 这就是问题所在！
这些是由
file-loader默认生成的URL – 相对URL
当您使用相对url时，Chrome浏览器将相对于包含的CSS文件parsing它们。 通常这很好，但在这种情况下，包含的文件在blob://...并且任何相对的URL都以相同的方式引用。 最终的结果是，Chrome尝试从父HTML文件加载它们，并最终试图parsingHTML文件作为字体的内容，这显然是行不通的。
解决scheme
强制file-loader使用包括协议（“http”或“https”）的绝对path。
改变你的webpackconfiguration，以包括相当于：
{ output: { publicPath: "http://localhost:8080/", // Development Server // publicPath: "http://example.com/", // Production Server } }
现在，它生成的URL将如下所示：
绝对的url！
Chrome和其他所有浏览器都会正确parsing这些url。
使用extract-text-webpack-plugin
值得注意的是，如果您将CSS解压到单独的文件中，则不会出现此问题，因为您的CSS将处于正确的文件中，并且URL将被正确parsing。
正如@mcortesi 在这里回答，如果你从css加载器查询中删除sourceMaps的CSS将被build立而不使用Blob和数据的URL将被罚款
对我来说，问题是我的正则expression式。 下面的窍门让bootstrap工作
{ test: /\.(woff|ttf|eot|svg)(\?v=[a-z0-9]\.[a-z0-9]\.[a-z0-9])?$/, loader: 'url-loader?limit=100000' },
与上面的@ user3006381一样，我的问题不仅仅是相对的URL，而且是webpack将文件放置为javascript文件。 他们的内容基本上都是：
module.exports = __webpack_public_path__ + "7410dd7fd1616d9a61625679285ff5d4.eot";
在字体目录而不是真正的字体和字体文件在散列码下的输出文件夹中。 要解决这个问题，我不得不改变我的url-loader（在我的例子中是我的image processing器）的testing，不加载字体文件夹。 我仍然必须在webpack.config.js中设置output.publicPath作为@ will-madden笔记，他的出色的答案。
我遇到了同样的问题，但由于不同的原因。
在马登的解决scheme没有帮助之后，我尝试了所有可以通过Intertubesfind的替代解决scheme – 也无济于事。 进一步探索，我碰巧打开了一个有争议的字体文件。 这个文件的原始内容已经被Webpack覆盖，包含了一些configuration信息，可能是以前修改文件加载器。 我用原始文件replace了损坏的文件，而且错误消失了（对于Chrome和Firefox）。
如果你正在使用Angular，你需要检查以确保你的
<base href="/">
标签出现在您的样式表之前。 我从这个开关我的代码：
<script src="~/bundles/style.bundle.js"></script> <base href="~/" />
对此：
<base href="~/" /> <script src="~/bundles/style.bundle.js"></script>
问题解决了。 感谢这个post打开我的眼睛。
我知道这并不回答OP的确切问题，但我来到这里的相同症状，但不同的原因：
我有这样的Slick Slider的.scss文件：
@import "../../../node_modules/slick-carousel/slick/slick.scss";
仔细检查后发现它试图从无效位置（ <host>/assets/css/fonts/slick.woff ）加载字体，这是从样式表中引用的。
我最终只是复制/font/我的assets/css/和问题已经解决了我。
