Question

我正在使用fontello制作的自定义图标字体。当尝试在webpack中使用它时，我收到以下错误：

ERROR in ./src/assets/fonts/fontello/fontello.ttf?86736756
Module parse failed: 
/Users/idamediafoundry/Documents/Work/Projects/ida-ida-default-
frontend-setup/ida-ida-default-frontend-setup-
static/src/assets/fonts/fontello/fontello.ttf?86736756 Unexpected 
character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)

它为woff（2），ttf，svg ...所有这些做到了这一点。我在SOF上使用了几种解决方案，但它们似乎都没有用。

这是我的webpack.config.js：

module: {
        loaders: [
            { test: /\.js$/, loader: 'babel', exclude: /node_modules/},
            { test: /\.css$/, loader: "style!css!" },
        { test: /\.scss$/, loader: "style!css!sass!" },


        { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},


    ]
}

有人对此有任何想法吗？

谢谢！

此致

马里奥

Answer 1

protip：不要使用不再存在的字体格式，因此没有eot或svg字体，因为WOFF实际上是ttf / otf周围的逐字节包装，没有ttf / otf，如果你已经有WOFF。这解决了一个问题：复杂性。现在，使用单一字体格式：不要将其捆绑在一起。不要将静态资产捆绑到javascript包中，让浏览器加载它们，使用适当的缓存，304加载预防等等。将它们捆绑在一起每当有人为你从未发生变化的数据加载数据包时，你就会浪费大量的带宽。您是否更改了某些代码，但您的静态资产保持不变？好消息，您的软件包现在将完全重新载入。由于托管成本，这会浪费您的用户的时间，带宽以及潜在的真实美元。

将静态资源保留在捆绑包中，使字体成为普通的CSS @ font-face规则。它会很好，它可以正常加载，它会缓存，后续加载速度会快得多，不需要命中服务器来重新传输字体文件。

Answer 2

好吧，前几天我也遇到了同样的问题，并在less-loader问题列表中找到了一个解决方案，这是由于字体网址中的“？234234234”落后，

在webpack loader config中尝试：

test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/

希望如果您（或某人）仍然遇到可能对您/他们有帮助的问题。 Original thread of solution in git

Webpack无法解析fontello字体

2 个答案: