Webpack和字体：模块解析失败

Question

我想在我的应用程序中使用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"; 

字体awesome.min.css包含此：

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

，由于某种原因，的WebPack试图用style-loader解析.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忽略我的装载机？

Answer 1

有一天，我添加font-awesome通过LESS源所以基本上

npm install --save less-loader 
bower install --save components-font-awesome 

然后我需要的字体真棒这样

require('bower_components/components-font-awesome/less/font-awesome.less') 

终于在webpack.config.js我加入载入模块

var path = require('path') 

module.exports = { 

    ... 

    , module: { 
     loaders: [ 
      {test: /\.less$/, loader: "style!css!less"}, 
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'} 
     ] 
    } 
}; 

我知道它跟不一样但我相信这样很容易。希望能帮助到你。

Answer 2

1. 它取决于在CSS中使用的网址。

2. 此错误相关型号以正则表达式，试图改变(\?[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' 
     }, 
    ] 
    } 
};