Webpack无法加载字体文件：意外的标记。

Question

我有一个使用字体文件的style.css文件，并且我在使用Webpack时无法成功加载字体文件。以下是我的loader配置：

    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文件，但我相当确定测试表达式已通过字体文件

- Angela

Answer 1

您测试表达式中的正则表达式有一个小错误。woff(2) 的意思是它总是寻找 woff2 并只捕获一个独立组里的 2。如果在其后添加 ?，webpack 应该能够识别 woff 了:

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

请告诉我这是否有效。

- nils

---

真不敢相信会因为一个愚蠢的错误而结束，谢谢。 - Angela

为什么Webpack想要将2捕获到一个单独的组中？ - justingordon

不需要。您也可以编写 /\.(ttf|eot|svg|woff2?)(\?[a-z0-9]+)?$/ 或使用非捕获组 /\.(ttf|eot|svg|woff(?:2)?)(\?[a-z0-9]+)?$/。出于清晰起见，我只是保留了捕获组（因为 woff2? 可能会被误读为匹配所有或不匹配任何内容）。 - nils

Answer 2

这对我很有帮助：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },

- svassr