Bootstrap & Font-genial mit Webpack | Font-awesome nicht icon Laden

Question

Ich versuche, eine einfache erfordern von Bootstrap und Font-awesome mit Webpack zu tun. Ich habe es geschafft, Bootstrap CSS zu laden, aber Font-awesome funktioniert nicht richtig. Diese

ist, was ich als Ergebnis bekommen

Meine Codes unten angegeben sind. Bitte helfen Sie mir, das Falsche zu entdecken, was ich hier mache.

Ressource: Github code hier verfügbar.

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" 
    } 
} 

Einstiegspunkt: 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 Konfigurationsdatei 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

Überprüfen Sie Ihre F12-Debug-Konsole und finden Sie Web-Browser Details über Fehler für die angegebenen Dateien.

Ihr Webserver liefert keine .woff und .woff2 Dateien mit korrektem MIME-Typ und daher werden sie überhaupt nicht aus Browser-Client-Perspektive geladen.

Sie müssen Web-Server-Seite ändern Unterstützung für .woff Dateien hinzufügen, zum Beispiel auf IIS Express in Web.config sollten Sie haben:

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

und innen webpack.config.js Sie haben sollten Modul-Lader wie

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

Answer 2

ich weiß, das ist 1 Jahr alt Frage, aber nur für den Fall, dass jemand in dem von Google am Ende:

Es ist ein bekanntes Problem von css-loader generating wrong file paths. Dies wird nicht im Produktions-Build passieren, aber immer noch ärgerlich, wenn Quadrate im Entwicklungsmodus gerendert werden.

Bis dieses Problem behoben ist, können Sie die Quellkarte von css-loader deaktivieren, um die in der Entwicklung korrekt wiedergegebene Schriftart zu sehen. Suchen Sie irgendwo in Ihrer Webpack-Konfiguration css?sourceMap und ändern Sie es in css.