Webpack kann Fontello-Fonts nicht analysieren

Question

Ich verwende eine benutzerdefinierte Symbolschrift, die mit Fontello erstellt wurde. Beim Versuch, diese in webpack zu verwenden, erhalte ich folgende Fehlermeldung:

ERROR in ./src/assets/fonts/fontello/fontello.ttf?86736756 
Module parse failed: 
/Users/idamediafoundry/Documents/Work/Projects/ida-ida-default- 
frontend-setup/ida-ida-default-frontend-setup- 
static/src/assets/fonts/fontello/fontello.ttf?86736756 Unexpected 
character '' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '' (1:0) 

Und es tut dies für woff (2), ttf, svg ... alle von ihnen. Ich habe mehrere Lösungen auf SOF verwendet, aber keine von ihnen scheint zu funktionieren.

Das ist mein webpack.config.js:

module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/}, 
      { test: /\.css$/, loader: "style!css!" }, 
     { test: /\.scss$/, loader: "style!css!sass!" }, 


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


    ] 
} 

Jeder auf diese Ideen erhalten?

Danke!

Grüße

Mario

Answer 1

protip: keine Schriftformate verwenden, die nicht mehr vorhanden ist, also keine eot oder svg Schriftarten und da WOFF wahrsten Sinne des Wortes ein Wrapper-Byte-für-Byte ist um ttf/otf , no ttf/otf wenn du schon WOFF hast. Das löst ein Problem: Komplexität. Nun, mit diesem Single-Font-Format: Bündeln Sie das nicht ein. Bündeln Sie statische Assets nicht in einem Javascript-Bundle, lassen Sie den Browser nicht laden, mit richtigem Caching, 304 Load Prevention, etc. Das Bündeln bedeutet, dass Sie verschwenden Unmengen von Bandbreite jedes Mal, wenn jemand Ihr Paket für Daten lädt, die sich nie geändert haben. Haben Sie einen Code geändert, aber Ihre statischen Werte blieben gleich? Gute Nachrichten, Ihr Bundle wird nun in seiner Gesamtheit redownloaded. Das verschwendet die Zeit Ihres Benutzers, Ihre Bandbreite und möglicherweise Ihre sehr realen Dollars wegen Hosting-Kosten.

Behalten Sie Ihre statischen Assets aus Ihrem Bundle, und machen Sie die Schriftart zu einer normalen CSS @ font-face-Regel. Es wird in Ordnung sein, es wird gut geladen, es wird im Cache gespeichert, und nachfolgende Ladevorgänge werden so viel schneller sein und müssen Ihren Server nicht treffen, um die Schriftartendatei neu zu übertragen.

Answer 2

Nun, ich habe auch das gleiche Problem den anderen Tag und eine Lösung in weniger Lader Ausgabe Liste gefunden, war es aufgrund des nachlaufs „? 234234234“ in der Schriftart-URL,

Try this in webpack loader config:

hoffe, wenn du (oder jemand) immer noch die Probleme hast, könnte es dir/ihnen helfen. Original thread of solution in git