Webpack 无法解析 fontello 字体

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 上找到的几种解决方案，但其中 none 似乎有效。

这是我的 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 实际上是 [=20= 的逐字节包装器], 没有 ttf/otf 如果你已经有 WOFF。这解决了一个问题：复杂性。

现在，使用单一字体格式：不要将其捆绑在一起。不要将静态资产捆绑到 javascript 捆绑包中，让浏览器加载它们，并使用适当的缓存、304 加载预防等. 将它们捆绑在一起意味着每次有人为从未更改过的数据加载您的捆绑包时，您都会浪费大量带宽。您是否更改了一些代码，但您的静态资产保持不变？好消息，您的捆绑包现在将全部重新下载。由于托管成本，这会浪费您用户的时间、您的带宽，并且可能会浪费您的真金白银。

将你的静态资产放在你的包之外，使字体成为正常的 CSS @font-face 规则。没问题，它会很好地加载，它会缓存，并且后续加载会更快，并且不需要访问您的服务器来重新传输字体文件。

Answer 2

好吧，前几天我也遇到了同样的问题，并在 less-loader 问题列表中找到了解决方案，这是由于字体 url、[=12 中尾随的 "?234234234" =]

在 webpack 加载器配置中试试这个：

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

希望如果您（或某人）仍然遇到问题，它可能会有所帮助 you/them。 Original thread of solution in git

Webpack 无法解析 fontello 字体

Webpack can't parse fontello fonts

fonts

webpack

fontello