Webpack无法加载字体文件：意外令牌 [英] Webpack can not load font file: Unexpected Token

问题描述

我有一个style.css文件，使用一个字体文件。我无法获取使用Webpack加载的字体文件。这是我的载入器配置。

I have a style.css file that makes use of a font file. And I'm having trouble getting the font file loaded using Webpack. Here is my loader configuration.

    loaders    : [
        {
            test    : /\.(js|jsx)$/,
            exclude : /node_modules/,
            loader  : 'react-hot!babel-loader'
        }, {
            test   : /\.styl/,
            loader : 'style-loader!css-loader!stylus-loader'
        }, {
            test   : /\.css$/,
            loader : 'style-loader!css-loader'
        }, {
            test   : /\.(png|jpg)$/,
            loader : 'url-loader?limit=8192'
        }, {
            test   : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/,
            loader : 'file-loader'
        }
        /*}, {
         test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader : 'url-loader?limit=10000&minetype=application/font-woff'*/
    ]

我收到的错误是

ERROR in ./src/fonts/icon/fonts/mf-font.woff?lt4gtt
Module parse failed: /PATH/src/fonts/icon/fonts/mf-font.woff?lt4gtt Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./src/fonts/icon/style.css 2:293-331

对我来说，Webpack看起来是一个CSS文件。但我确定测试表达式为字体文件传递

It looks to me that Webpack is taking it as a CSS file when it's not. But I'm pretty sure the test expression passes for the font file

推荐答案

测试表达式中的正则表达式有一个小错误。 woff（2）表示它总是查找 woff2 ，并且只捕获 code>在一个单独的组。如果你之后添加？，webpack应该也能够识别 woff ：

The regex in your test expression has a small mistake. woff(2) means that it always looks for woff2 and just captures the 2 in a separate group. If you add a ? after it, webpack should be able to recognize woff as well:

test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader : 'file-loader'

我知道这是否有效。

这篇关于Webpack无法加载字体文件：意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！