Wie benutzt man Fontdateien, die vom Webpack ausgegeben werden?

Zusammenfassung:Wie benutzt man Fontdateien, die vom Webpack ausgegeben werden?

webpack Probleme, zusätzlich zu bundle.js, Font-Dateien für font-awesome. Diese Dateien werden in bundle.js nicht ordnungsgemäß referenziert.

Details:

Ich habe eine entry.js-Datei, die in ein Unterverzeichnis gibt (webpack) von einem Unterverzeichnis (dist). dist ist das eigenständige, CDN-verteilbare Verzeichnis. Die Struktur ist aus Gründen, die für den Site-Generator spezifisch sind (was für diese Frage keine Rolle spielt).

(root folder for the site dev) 
│ entry.js 
│ webpack.config.js 
│ 
└───dist 
    │ index.html 
    │ 
    └───webpack 
      674f50d287a8c48dc19ba404d20fe713.eot 
      912ec66d7572ff821749319396470bde.svg 
      af7ae505a9eed503f8b8e6982036873e.woff2 
      b06871f281fee6b241d60582ae9369b9.ttf 
      bundle.js 
      fee66e712a8a08eef5805a46892932ad.woff

index.html Lasten webpack/bundle.js und Schrift Ehrfürchtig zu verwenden versucht:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    </head> 
    <body> 
     hello world <i class="fa fa-shower"></i> 
     <script src="webpack/bundle.js"></script> 
    </body> 
</html>

Die Schriftart-Dateien nicht korrekt referenziert, sieht bundle.js für sie in der Wurzel der Site, während sie in webpack sind, wo sie wurden zusammen mit bundle.js ausgegeben. Mit anderen Worten: bundle.js ist nicht bewusst, dass webpack.config.js es angewiesen hat, in ein Unterverzeichnis zu gehen. Die Ausgabe auf der Konsole (Konsolenausgabe):

index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/af7ae505a9eed503f8b8e6982036873e.woff2 net::ERR_FILE_NOT_FOUND 
index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/fee66e712a8a08eef5805a46892932ad.woff net::ERR_FILE_NOT_FOUND 
index.html:1 GET file:///D:/MegaSync/dev/webpack/testoffonts/dist/b06871f281fee6b241d60582ae9369b9.ttf net::ERR_FILE_NOT_FOUND

Wie für bundle.js dieses Bewusstsein zu erhöhen, so dass sie ihre Ausgangsgenerierten Peers auf dem gleichen Niveau verweist er selbst (/webpack/... in meinem Fall)?

Die Komponentendateien:

entry.js:

import 'font-awesome/css/font-awesome.css'

webpack.config.js:

module.exports = { 
    entry: "./entry.js", 
    output: { 
     path: __dirname + '/dist/webpack', // should use the path module 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       use: ['style-loader', 'css-loader'] 
      }, 
      { 
       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" 
      } 
     ] 
    } 
};

Hinweis: Dieses Problem tritt für die Schriften nicht in einer CSS-Datei importiert, ab sofort den einzigen Fall, ich habe es mit Font Ehrfürchtig ist als Modul verwendet für die Lösung

Quelle

2017-07-28 WoJ

Alle Kredite gehen an Jiggneshh Gohel und sein detailed post on webpack GithHub

Hinzufügen publicPath löst das Problem:

output: { 
     path: __dirname + '/dist/webpack', // should use the path module 
     filename: "bundle.js", 
     publicPath: "/webpack/", 
    },

der Pfad der eine das Bündel und andere emittierten Dateien ausgegeben werden, relativ zu der Wurzel der exponierten Seite sein sollte (http://example.com/).

Quelle

2017-07-28 14:54:52 WoJ

Wie benutzt man Fontdateien, die vom Webpack ausgegeben werden?

Antwort

Verwandte Themen