Ich habe mir eine Weile lang den Kopf darüber geschlagen und frage mich, ob es überhaupt möglich ist, damit anzufangen. Danke für jede Hilfe mit diesem!
Ich habe ein npm-Paket, das im Grunde eine Bibliothek von React-Komponenten ist. Diese Bibliothek enthält eingebettete Stylesheets, die auf Assets wie Schriftarten und Bilder aus dem CSS verweisen. Diese werden dann alle mit webpack in my-package.js gebündelt.
Die Konfiguration dafür sieht folgendermaßen aus:
%Vor% Wenn ./lib/components/index.js aussieht wie:
So weit, so gut.
Jetzt in einer anderen Code-Basis habe ich die Hauptanwendung, die dieses npm-Paket installiert.
Mein Anwendungsstamm benötigt dieses Paket ...
%Vor%Und ist dann selbst webpack gebündelt und in den Browser geladen. Alle Skripte und Stilblöcke sind korrekt gebündelt, aber die Stile, die auf die Assets verweisen, verwenden die relative URL aus dem npm-Paket selbst, und geben mir daher 404s aus der Anwendung.
Gibt es eine Möglichkeit zu sagen, dass Webpack diese Bilder von node_modules/my-package/build/[webpack-generated-name].jpg auflösen soll?
Die Webpack-Konfiguration meiner Anwendung sieht folgendermaßen aus:
%Vor%Ich habe mir einen Weg ausgedacht.
In der Webpack-Konfiguration meiner Anwendung habe ich ein Plugin (empfohlen von @Interrobang) hinzugefügt, das die statischen Assets von node_module/my-package in den öffentlichen Pfad des App-Servers kopiert:
Diese werden dann durch Aufruf des Asset-Namens zugänglich gemacht: localhost:XXXX/my-image.jpg . Der Server hier schaut im Grunde auf /my/public/my-image.jpg , wenn Sie ihn richtig eingerichtet haben.
Ich benutze Express, also musste ich nur app.use(express.static('my/public')) auf meinem App Server definieren.
Tags und Links javascript npm reactjs webpack assets
