Webpack und Schriftarten: Modul Parse fehlgeschlagen

Question

Ich versuche FontAwesome in meiner App zu verwenden. Ich benutze Webpack, um es magisch zu machen. Meine config:

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' }, 
    ]) 
    } 

Ich anfordernden FontAwesome CSS wie folgt aus:

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

font-awesome.min.css enthält diese:

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

Und aus irgendeinem Grund, WebPack versucht, .woff-Datei mit Style-Loader zu parsen und gibt mir einen Fehler:

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 

Ich bin jetzt wirklich verloren. Irgendwelche Ideen?

Update: Ich bin jetzt vollständig verloren. Ich habe beschlossen, mit meiner Config zum Herumtollen und setzen Sie diese Zeile in Lader:

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

und erforderlich, um diese Datei:

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

Got error:

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) 

Allerdings, wenn ich versuchte, meine Datei wie folgt zu fordern:

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

Alles lief glatt. Sieht aus wie Webpack ignoriert meine Lader?

Answer 1

Neulich füge ich die font-awesome durch die LESS Quelle so dass im Grunde

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

Dann benötige ich font genial wie dieser

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

Und schließlich in der webpack.config.js ich hinzufügen, die loader Module

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

Ich weiß, dass es nicht das gleiche mitistaber ich glaube, dass es einfach so ist. Ich hoffe es hilft.

Answer 2

1. es hängt von der in css verwendeten URL ab.

2. Dieser Fehler ist auf Regex zurückzuführen, versuchen Sie, (\?[a-z0-9]+) zu (\?v=[0-9]\.[0-9]\.[0-9]) oder (\?[\s\S]+) zu ändern.

Beispiel:

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