Webpack can not load font file: Unexpected Token

问题:

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'*/     ] 

The errors that I receive is

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 

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

回答1:

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' 

Please let me know if this worked.

回答2:

This did the trick for me:

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

文章来源: Webpack can not load font file: Unexpected Token