1

我正在使用由 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'},


    ]
}

有人对此有任何想法吗？

谢谢！

问候

马里奥

4

2 回答 2

3

protip：不要使用不再存在的字体格式，所以不要使用eot或svg字体，并且由于 WOFF 实际上是 ttf/otf 的逐字节包装，如果你已经有 WOFF，则不要使用 ttf/otf。这解决了一个问题：复杂性。

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

将你的静态资源放在你的包之外，让字体成为一个普通的 CSS @font-face 规则。它会很好，它会很好地加载，它会缓存，随后的加载会更快，并且不需要访问您的服务器来重新传输字体文件。

于 2016-07-26T01:10:45.043 回答
1

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

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

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

希望如果您（或某人）仍然遇到问题，它可能会帮助您/他们。 git中解决方案的原始线程

于 2016-12-08T06:01:45.917 回答