Die Schriftarten werden nicht in das Webpack geladen. Build

Question

Die Schriftarten werden nicht im Browser gerendert, wenn der Build-Prozess anscheinend einwandfrei funktioniert. Webpack verschiebt die Schriftartdateien korrekt in das Verzeichnis public/fonts. Die erstellten CSS-Dateien zeigen den korrekten Pfad zur Schriftartendatei an. Hier

ist die Ladekonfiguration:

{ 
    test: /\.s?css$/, 
    loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] 
}, 
{ 
    test: /\.(eot|svg|ttf|woff|woff2)/, 
    loader: 'file?name=../fonts/[name].[ext]' 
}, 
{ 
    test: /\.(png|jpg|gif)$/, 
    loader: "url-loader?limit=100000" 
} 

Hier ist der Build-Ausgabe:

         Asset  Size Chunks    Chunk Names 
        ../fonts/icon_set_2.svg 20.9 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.eot 20.1 kB   [emitted] 
../fonts/glyphicons-halflings-regular.woff 23.4 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.ttf 45.4 kB   [emitted] 
    ../fonts/glyphicons-halflings-regular.svg 109 kB   [emitted] 
        ../fonts/icon_set_1.eot 71.6 kB   [emitted] 
        ../fonts/icon_set_1.woff 41.9 kB   [emitted] 
        ../fonts/icon_set_1.ttf 71.5 kB   [emitted] 
        ../fonts/icon_set_1.svg 98.5 kB   [emitted] 
        ../fonts/icon_set_2.eot 13.9 kB   [emitted] 
        ../fonts/icon_set_2.woff 7.85 kB   [emitted] 
        ../fonts/icon_set_2.ttf 13.7 kB   [emitted] 
../fonts/glyphicons-halflings-regular.woff2 18 kB   [emitted] 
         ../fonts/fontello.eot 533 kB   [emitted] 
        ../fonts/fontello.woff 321 kB   [emitted] 
         ../fonts/fontello.ttf 532 kB   [emitted] 
         ../fonts/fontello.svg 826 kB   [emitted] 
         ../fonts/Glyphter.eot 7.22 kB   [emitted] 
        ../fonts/Glyphter.woff 5.02 kB   [emitted] 
         ../fonts/Glyphter.ttf 7.06 kB   [emitted] 
         ../fonts/Glyphter.svg 45.2 kB   [emitted] 
          main.bundle.js 1.2 MB  0 [emitted] main 
          vendor.bundle.js 3.74 MB  1 [emitted] vendor 
         main.bundle.js.map 1.72 MB  0 [emitted] main 
         vendor.bundle.js.map 5.58 MB  1 [emitted] vendor 

Diese von der Bootstrap-Datei ist, dass der Browser ,:

@font-face { 
    font-family: 'Glyphicons Halflings'; 

    src: url(/../fonts/glyphicons-halflings-regular.eot); 
    src: url(/../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(/../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(/../fonts/glyphicons-halflings-regular.woff) format('woff'), url(/../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(/../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); 
} 

empfängt Und das ist die Verzeichnisstruktur des öffentlichen Verzeichnisses

Aber wenn ich versuche, die Schriftarten (Glyphicons) zu verwenden, werden sie nicht richtig dargestellt.

Answer 1

Ich bin mir nicht sicher warum, aber Sie können nicht einen relativen Pfad für die Schriftarten verwenden. Ich hatte genau das gleiche Problem und meine Arbeit bestand darin, die Schriften in einen Ordner unter dem Verzeichnis "build" zu stellen. So würde die Verzeichnisstruktur wie folgt aussehen:

+ public 
    + build 
     main.bundle.js 
     vendor.bundle.js 
     + fonts 
      glyphicons-halflings-regular.eot 
      rest of font files... 

Hier ist, was meine Lader wie folgt aussehen:

{ 
    test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
    loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.(ttf|eot|svg)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
    loader: 'file-loader?name=fonts/[name].[ext]' 
}, 
{ 
    test: /\.css$/, 
    loader: 'style-loader!css-loader' 
}, 

Beachten Sie auch, dass ab Webpack 2.0 Sie die * -Loader Version für alle Lader verwendet werden soll, wie in meinem Beispiel.

Hoffe, dass hilft.