Der richtige Weg zum Importieren von Bildern in HTML mit Webpack

Question

Ich verwende React + Redux-saga + Auth0 Paket, und es verwendet Webpack. Normalerweise arbeite ich mit Gulp, und ich habe gerade angefangen, Webpack zu benutzen, so dass ich nicht viel Erfahrung damit habe.

Lassen Sie uns sagen, ich habe das Bild Project/src/static/images/hello.jpg und ich möchte es so auf meine App verwenden:

<img src="images/hello.jpg" alt=".." /> 

• Wie kann ich feststellen webpack diesen Ordner in den dist Ordner zu kompilieren?
• Ich habe festgestellt, dass die Bilder, die ich aus meinen .scss Dateien importiert habe, mit einem Hashnamen kompiliert wurden. Selbst wenn ich meine Bilder kompiliere, wie würde ich dann den vollständigen Pfad erhalten?
• Ich habe versucht, dieses Problem zu googlen und ich habe keine Probleme wie diese gefunden, also habe ich das Gefühl, dass ich etwas falsch mache, oder?

Dies ist meine webpack.config.babel.js Datei.

Answer 1

Nun natürlich verwende ich expressjs Server, der die Option Serve static files hat. Also, was ich getan habe, ist nur diese Zeile Code in meine devServer.js Datei hinzufügen:

app.use(express.static('src/static'));