Bootstrap＆Font-awesome with Webpack |フォント素晴らしいアイコン

Question

をロードしていない私は、簡単な操作を行うにしようとしていますがブートストラップとフォント-素晴らしいのWebPACKでの必要としています。私はブートストラップCSSを読み込むことができましたが、Font-awesomeは正しく動作していません。

は、これは私が

私のコードを怒鳴るを与えられている結果として得るものです。私がここでやっている間違ったことを発見するのを助けてください。

リソース：Github codeが利用可能です。

TIA
Ariful

package.json

{ 
    "name": "", 
    "version": "0.0.1", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "webpack -w" 
    }, 
    "license": "MIT", 
    "devDependencies": { 
    "css-loader": "^0.21.0", 
    "expose-loader": "^0.7.0", 
    "file-loader": "^0.8.4", 
    "style-loader": "^0.13.0", 
    "url-loader": "^0.5.6", 
    "webpack": "^1.12.2" 
    }, 
    "dependencies": { 
    "admin-lte": "^2.3.2", 
    "bootstrap": "^3.3.5", 
    "bootstrap-webpack": "0.0.5", 
    "exports-loader": "^0.6.2", 
    "extract-text-webpack-plugin": "^0.8.2", 
    "font-awesome": "^4.4.0", 
    "font-awesome-webpack": "0.0.4", 
    "imports-loader": "^0.6.5", 
    "jquery": "^2.1.4", 
    "less": "^2.5.3", 
    "less-loader": "^2.2.1" 
    } 
} 

エントリポイント：index.js

var $ = require('jquery'); 

require('expose?$!expose?jQuery!jquery'); 

require("bootstrap-webpack"); 
require('./node_modules/font-awesome/css/font-awesome.css'); 

require('./resources/css/style.css'); 


$('h1').html('<i class="fa fa-bars"></i> this is bootstrap'); 
console.log('hi there'); 

WebPACKの設定ファイルwebpack.config.js

module.exports = { 

    entry: './index.js', 
    output: { 
     path: 'public/assets/', 
     filename: 'bundle.js' 
    }, 
    devtool: 'source-map', 
    module: { 
     loaders: [ 

      {test: /\.css$/, loader: "style!css!" }, 
      { test: /\.less$/, loader: "style!css!less!" }, 

      //bootstrap 
      {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'}, 

      //font-awesome 
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, 
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } 



     ] 
    }, 

} 

Answer 1

F12デバッグコンソールを確認し、特定のファイルのエラーに関するWebブラウザの詳細を参照してください。

Webサーバーは、正しいMIMEタイプの.woffファイルと.woff2ファイルを提供していないため、ブラウザークライアントの観点からはまったく読み込まれません。

あなたが持っている必要がありWeb.configファイルでIIS Expressの上のインスタンスのために、.woffファイルのサポートを追加するために、ウェブサーバ側を変更する必要があります。

<system.webServer> 
    <staticContent> 
     <mimeMap fileExtension="woff" mimeType="application/font-woff" /> 
     <mimeMap fileExtension="woff2" mimeType="application/font-woff" /> 
    </staticContent> 
    </system.webServer> 

と内部はあなたが持っている必要がありますwebpack.config.js

{ 
     test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, 
     loader: 'url-loader' 
    } 

Answer 2

のようなモジュールローダ私は、これは1歳の質問ですけど、念のために誰もがGoogleからのこの中に終わる：

からの既知の問題がありますcss-loader generating wrong file paths。これは実稼働ビルドでは発生しませんが、開発モードで四角形をレンダリングするときには迷惑になります。

この問題が修正されるまで、css-loaderソースマップを無効にして、開発中にフォントが正しく表示されるようにすることができます。あなたのwebpack設定のどこかで、css?sourceMapと書いてください。cssに変更してください。