web-dev-qa-db-ja.com

Webpackはフォントファイルをロードできません：予期しないトークン

フォントファイルを使用するstyle.cssファイルがありますが、Webpackを使用してフォントファイルを読み込むことができません。ローダーの構成は次のとおりです。

    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ファイルとしてそれを使用しているように見えます。しかし、フォントファイルのテスト式はパスするはずです。

cssfontswebpack
45
Angela

テスト式の正規表現に小さな間違いがあります。 woff(2)は、常にwoff2を探し、別のグループで2をキャプチャすることを意味します。その後に?を追加すると、webpackはwoffも認識できるはずです：

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

これがうまくいったかどうか教えてください。

65
nils

これは私のためにトリックをしました：

{ 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" },
3
svassr