Webpack和字体:模块解析失败

我正在尝试在我的应用程序中使用FontAwesome.我正在使用webpack来做它的魔力.我的配置是:

  resolve: {
    // you can now require('myfile') instead of require('myfile.cjsx')
    extensions: ['', '.js', '.jsx', '.cjsx', '.coffee']
  },
  module: {
    loaders: commonLoaders.concat([
      { test: /\.css$/, loader : 'style-loader!css-loader' },
      { test: /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, loader : 'file-loader' },
      { test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']},
      { test: /\.coffee$/, loader: 'coffee' },
      { test: /\.jsx$|\.js$/, loader: 'jsx-loader?harmony' },
    ])
  }

我正在请求FontAwesome CSS:

require "../../styles/font-awesome.min.css";

font-awesome.min.css包含这个:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

由于某种原因,WebPack尝试使用样式加载器解析.woff文件并给出错误:

ERROR in ./src/fonts/fontawesome-webfont.woff
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.woff 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/styles/font-awesome.min.css 2:73-117

我现在真的迷路了.有任何想法吗？

更新: 我现在完全迷失了.我决定愚弄我的配置并把这行放在加载器中:

{ test: /\.eot$/, loader : 'file' },

并要求此文件:

require "../../fonts/fontawesome-webfont.eot";

得到错误:

ERROR in ./src/fonts/fontawesome-webfont.eot
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.eot Line 2: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

但是,当我试图要求我的文件像这样:

require "file!../../fonts/fontawesome-webfont.eot";

一切顺利.貌似webpack忽略了我的装载机？

它取决于css中使用的url.

此错误与regex相关,尝试更改(\?[a-z0-9]+)为(\?v=[0-9]\.[0-9]\.[0-9])或(\?[\s\S]+).

例:

https://github.com/gowravshekar/font-awesome-webpack

module.exports = {
       module: {
         loaders: [
         // the url-loader uses DataUrls.
         // the file-loader emits files.
           { 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" }
        ]
      }
    };

https://github.com/shakacode/font-awesome-loader

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
        // loader: "url?limit=10000"
        loader: "url"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        loader: 'file'
      },
    ]
  }
};