Конфигурация загрузчика файлов Webpack для статических изображений

Question

Hy, у меня есть папка /images с подкаталогом /static с некоторыми изображениями.

как я могу настроить веб-пакет для публикации общедоступных изображений из images/static по пути dist/images/image-name.png и сохранения имен?

спасибо

Answer 1

Вы можете использовать CopyWebpackPlugin, чтобы скопировать все файлы в нужную папку вашей сборки.

plugins: [
    new CopyWebpackPlugin([
    { from: 'src/images/static', to: './dist/images' }
  ])
  ]

Позже вы должны импортировать их вот так.

<img src="path/to/dist/image.png">

В противном случае вы можете использовать загрузчик файлов, чтобы сделать URL-адрес файла доступным для использования в программе

 {
   test: /\.(jpe?g|png|gif|svg)$/i, 
   loader: "file-loader?name=/images/[name].[ext]"
 }

и ваши изображения будут отправлены на:

dist/images/

Позже вы можете импортировать изображения следующим образом:

import url from './file.png'

<img src={url}>