Как мне правильно грузить картинки Webpack, чтобы сохранить структуру папок?

В Webpack есть несколько подходов к загрузке картинок и сохранению структуры папок. Один из самых популярных способов - использование загрузчика file-loader или url-loader вместе с плагином copy-webpack-plugin.

1) Установите необходимые пакеты:

npm install --save-dev file-loader copy-webpack-plugin

2) Определите правила для загрузки картинок в вашем конфигурационном файле webpack (например, webpack.config.js):

module.exports = {
  // ваша конфигурация
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images', // указываем папку для сохранения
              name: '[name].[ext]', // сохраняем оригинальные имена и расширения файлов
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // плагин для копирования файлов из статической папки
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/static', // путь до папки с исходными файлами
          to: 'static', // путь до папки сборки
          noErrorOnMissing: true, // игнорирование ошибок, если файл не найден
        },
      ],
    }),
  ],
};

3) Теперь при сборке проекта, все картинки, которые соответствуют указанному расширению файлов (png, jpeg, jpg, gif), будут скопированы в папку сборки, сохраняя свою структуру и исходные имена файлов. Папка в проекте должна быть с именем "src/static" или вы можете изменить это в настройках плагина copy-webpack-plugin.

4) Чтобы получить доступ к загруженным картинкам в коде, вы можете использовать относительный путь к файлу:

import image1 from './images/image1.jpg';
import image2 from './images/subfolder/image2.png';

// код, использующий загруженные картинки

Таким образом, вы сможете загрузить и сохранить структуру папок для всех ваших картинок при использовании Webpack.