Правильный способ импорта изображений в html с помощью Webpack

Question

Я использую пакет React + Redux-saga + Auth0, и он использует Webpack. Обычно я работаю с Gulp, и в последнее время я начал использовать Webpack, поэтому у меня не так много опыта.

Скажем, у меня есть изображение Project/src/static/images/hello.jpg, и я хочу использовать его на мое приложение, как это:

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

• Как сказать WebPack скомпилировать эту папку в папку dist?
• Я заметил, что изображения, импортированные из файлов .scss, скомпилированы с хешированным именем. Так что, даже если я скомпилирую свои изображения, как бы получить полный путь?
• Я попытался решить эту проблему, и у меня не было таких проблем, как этот, поэтому у меня такое чувство, что я делаю что-то неправильно, не так ли?

Это мой webpack.config.babel.js файл.

Answer 1

Ну, очевидно, я использую expressjs-сервер, у которого есть опция Serve static files. Так что я только что добавил эту строку кода в свой файл devServer.js:

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