Webpack 5. Как сохранить структуру папок image?

Для сохранения структуры папок image в Webpack 5 можно использовать загрузчик file-loader или url-loader. Оба загрузчика позволяют копировать файлы из исходной папки в выходную, сохраняя при этом исходную структуру папок.

Вот пример использования file-loader:

1. Установите file-loader с помощью npm:

npm install file-loader --save-dev

2. В настройках конфигурации webpack добавьте правило для обработки файлов image:

module.exports = {
  // остальные настройки...
  module: {
    rules: [
      {
        test: /.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'image/', // указываем выходную папку
              esModule: false, // устанавливаем значение 'false', чтобы поддержать старые версии webpack
            },
          },
        ],
      },
    ],
  },
};

3. Теперь, если у вас есть файлы с расширением .png, .svg, .jpg или .gif в вашей папке image, они будут скопированы в заданную выходную папку (в данном случае 'image/') с сохранением структуры папок.

Например, если у вас есть следующая структура папок:

src/
  image/
    logo.png
    icons/
      menu.svg
      close.svg

После выполнения компиляции с помощью Webpack 5, файлы logo.png, menu.svg и close.svg будут скопированы в папку image в выходной папке.

Также вы можете использовать url-loader вместо file-loader, если хотите получить возможность встраивания маленьких изображений в виде URL-адресов в код JavaScript или CSS. Однако при использовании url-loader следует учитывать размеры файлов, чтобы выбирать между встраиванием и сохранением в отдельных файлах.

Надеюсь, это помогает вам сохранить структуру папок image при использовании Webpack 5.