Ich versuche, einige Schriftarten in eine Komponentenbibliothek aufzunehmen, die ich als UMD-Paket verteilen werde, das mit Webpack erstellt und als NPM-Modul installiert wurde. Die Komponenten verwenden diese Schriftarten. Das Problem besteht darin, dass URLs, die auf die Schriftarten im generierten Bundle verweisen, falsch sind und zu 404 führen, wenn die Anwendung ausgeführt wird, die die Bibliothek verwendet.
Zum Beispiel gibt resolve-url-loader eine URL von "/myfont.woff" aus. Aber natürlich ist diese Datei tatsächlich nicht unter dieser URL in der Anwendung verfügbar, es sei denn, die Anwendung, die sie verwendet, führt eine Konfiguration durch, um diese Datei zu kopieren und sie unter dem erwarteten Pfad zu bedienen.
Gibt es eine Möglichkeit, diese Fonts automatisch verfügbar zu machen (dh font-face: 'My Font' funktioniert), wenn eine Anwendung eine Komponente aus meiner Bibliothek importiert, Minimierung der erforderlichen Konfigurationsmenge in der Anwendung, die sie verwendet ?
Bei großen Dateien möchte ich nicht url-loader und Base 64-encodieren und ich kann kein CDN verwenden.
Ich denke, der einfachste Weg besteht darin, eine .css -Datei anzugeben, in der Ihre Assets durch relative url(...) -Anweisungen verwendet werden. Dann etwas wie
in ihrer webpack.config.js und Ihrer .css-Datei, die in ihren Code importiert wurde, können sie die Assets durch automatische Übertragung in ihr öffentliches Ausgabeverzeichnis verwenden (URLs sollten auch automatisch im Ergebnis-CSS-Bündel angepasst werden).
Sie können beispielsweise nach der Bibliothek Onsen UI suchen, die das Einbetten ihrer Assets und Stile anbietet Durch diese Dateien:
%Vor%Hier ist ein Beispiel, wie sie Zeichensätze über relative URLs dort verwenden:
%Vor%Sie benötigen einige Lader, um diese Aufgabe zu erledigen. Um Probleme mit großen Dateien zu beheben, benutze ich Datei-Loader.
%Vor%schließlich Import-Anweisungen verwenden, um die CSS-Dateien der Schriftarten
zu importieren %Vor%aber stellen Sie sicher, dass Sie Webpack CSS Loader Setup
habenTags und Links reactjs webpack webpack-file-loader