Webpack и fonts: parse module failed

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 пытается проанализировать файл .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"; 

Got ошибка:

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 через МЕНЬШЕ источник так в основном

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'} 
     ] 
    } 
}; 

Я знаю, что это не то же самое с .css, но я считаю, что это так легко. Надеюсь, поможет.

Answer 2

1. все зависит от используемого кода в css.

2. Эта ошибка выслана в 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' 
     }, 
    ] 
    } 
};