Fügen Sie Assets aus dem Paket webpack packed npm hinzu

9

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!

Das npm-Paket

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:

%Vor%

So weit, so gut.

Die Anwendung

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.

Konsolenfehler

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%     
Johnny Copperstone 11.04.2016, 21:45
quelle

1 Antwort

4

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:

%Vor%

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.

    
Johnny Copperstone 12.04.2016, 10:27
quelle