Блог

Я новичок в Webpack и пытаюсь создать простой веб-сервер.

Когда я запускаю npm run build , мои jpg файлы создаются в моем dist каталоге вместе с дубликатами, которые не могут быть загружены. У меня есть src каталог, который выглядит следующим образом:

Когда я запускаю npm run build , мой dist каталог выглядит так:

В VS Code я вижу, что первый и третий jpg файлы, созданные в dist папке, загружены правильно, и я вижу изображение, когда нажимаю на них. Это единственные jpg файлы, которые я ожидаю создать. Однако первый и четвертый jpg , похоже, являются дубликатами сгенерированных файлов, и когда я нажимаю на них, VS Code показывает это:

В сгенерированном index.html файле в dist каталоге мы видим, что HTML использует jpg файлы, которые не могут быть загружены. Мы можем видеть это показано здесь:

 <img src="9941501b9ff26a2ac9eb.jpg">
 

Неудивительно, что когда я запускаю свой сервер с npm run start:dev помощью, моя страница некорректно отображает изображение:

Вот правило для загрузки изображений в мой webpack.config.js файл:

 {
    test: /.(png|svg|jpg|gif)$/,
    use: [
        {
            loader:'file-loader'
        }
    ]
}
 

Должно быть, я что-то делаю здесь не так, но я не уверен, что это может быть, потому что я новичок в Webpack. Дайте мне знать, если я смогу предоставить больше информации, чтобы помочь точно определить проблему, и я буду рад это сделать.