Ich habe eine Angular-Anwendung, die das Webpack als Modulbündler verwendet. Diese Anwendung verwendet auch einige Assets (Bilder, Schriftarten, Stile) aus anderen Projekten, die als node_modules importiert werden.
Die Struktur meiner Anwendung ist so etwas wie
%Vor% Nun, in meinem scss habe ich einige Verweise auf Bilder src="/images/..." , die sich in node_modules / my_assets / images befinden, also benutzte ich das copy-webpack-plugin, um die Bilder in Bundle-Zeit einzubinden
Das funktioniert gut.
Problem ist jetzt mit Schriftarten. Ich habe die gleiche Struktur, aber wenn das Stylesheet eine Schriftart referenziert, ist es jetzt mit einer relativen URL ./fonts/Open-Sans-300/Open-Sans-300.eot
Ich habe also versucht, dasselbe wie vorher zu tun
%Vor%Das funktioniert nicht. Wenn ich den / fonts-Ordner direkt in meinen / src / stylesheets-Ordner kopiere, funktioniert es einwandfrei. Ich nehme an, dass es relativ ist, weil ich nicht den Ordner kopieren muss, in den ich muss, also habe ich viele Varianten ausprobiert:
%Vor%Keine davon funktioniert. Irgendeine Idee warum nicht? Und was soll ich stattdessen schreiben?
Ich sollte auch erwähnen, dass ich einen Lader für die Schriften
habe %Vor%scheint gut zu funktionieren.
EDIT: Ich muss auch sagen, dass dieses Problem bei der Verwendung von webpack-dev-server auftritt, so dass ich nicht wirklich weiß, wo das webpack die Dateien kopiert, wenn man so etwas macht { from: 'node_modules/my-assets/images', to: 'images' }
Danke
Wenn Sie möchten, dass Ihre SASS-Dateien Pfade zu statischen Elementen wie Bildern oder Schriftarten auflösen können, ist CopyWebpackPlugin nicht das Werkzeug für Sie.
Wenn Ihre Font- und SCSS-Loader vorhanden sind, sollte Webpack in der Lage sein, den Abhängigkeitenbaum selbst zu erstellen.
Entfernen Sie die Einstellung CopyWebpackPlugin aus Ihrer Webpack-Konfiguration, und stellen Sie sicher, dass Sie output.publicPath Einstellung.
Seit Webpack sass-loader bietet keine URL-Umschreibung , müssen Sie Webpack anweisen, sie entsprechend dem Ort neu zu schreiben, an dem die Assets nach dem Build verschoben werden.
Webpack resolve-url-loader Plugin tut genau das. Platziere es direkt nach dem Sass-Loader in der CSS-Ladekette und schon sollte es losgehen.
copy-webpack-plugin docs , erklären Sie deutlich, warum das Plugin keine Dateien mit webpack-dev-server kopiert:
Ab Version 3.0.0 haben wir aufgehört, fs zu verwenden, um Dateien in das Dateisystem zu kopieren, und begannen abhängig von In-Memory-Dateisystem :
... webpack-dev-server liefert die statischen Dateien in Ihrem Build-Ordner. Es überwacht Ihre Quelldateien auf Änderungen und wenn Änderungen vorgenommen werden, wird das Bundle neu kompiliert. Dieses modifizierte Bundle wird aus dem Speicher an dem relativen Pfad bereitgestellt, der in publicPath angegeben ist (siehe API). Es wird nicht in das konfigurierte Ausgabeverzeichnis geschrieben.
Wenn Sie webpack-dev-server in Ihr Ausgabeverzeichnis schreiben müssen, können Sie es mit dem Schreibprogramm erzwingen. Datei-Webpack-Plugin .
Tags und Links webpack