如何配置webpack在React中加載glyphicons/font-awesome圖標

Question

在反應項目中使用bootstrap時，運行dev環境可以正常工作。但是當我運行npm build package項目。顯示引導字體錯誤。

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot 
Module parse failed: /Users/xx/WorkDir/react-leap/node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 
    at Parser.pp.raise (/Users/xx/WorkDir/react-leap/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13) 
    at Parser.pp.getTokenFromCode (/Users/xx/WorkDir/react-leap/node_modules/webpack/node_modules/acorn/dist/acorn.js:2831:8) 

我的WebPack配置

module: { 
    loaders: [ 
    { 
     test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, 
     loader: 'file-loader', 
     include: paths 
    } 
    ] 
} 

引導版本：

"bootstrap": "3.3.6", 

Answer 1

我所遇到的一個解決方案，以這樣的：

webpack.config.js

module: { 
    preLoaders: [ 
     {test: /\.js$/, exclude: /node_modules/, loader: 'jshint-loader'} 
    ], 
    loaders: [ 
     {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }, 
     {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /\.woff(2)?(\?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" } 
    ] 
} 

確保安裝所有這些裝載機

npm i jshint-loader style-loader css-loader less-loader url file --save-dev 

該進口引導後，在你的文件作爲

require('bootstrap/less/bootstrap.less');