Как собрать картинки в разных директориях в финальный бандл Webpack?

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

1. Установка необходимых зависимостей:

• Создайте новый проект или перейдите в директорию с существующим.
• Установите Webpack и связанные пакеты с помощью команды:

    npm install webpack webpack-cli --save-dev

2. Настройка конфигурации Webpack:

• Создайте файл webpack.config.js в корневой директории проекта.
• Импортируйте необходимые модули:

    const path = require('path');

• Экспортируйте объект с настройками Webpack:

    module.exports = {
      // Настройки веб-приложения
      entry: './src/index.js', // Главный файл приложения
      output: {
        path: path.resolve(__dirname, 'dist'), // Директория для выходных файлов
        filename: 'bundle.js' // Название выходного файла веб-приложения
      },
      // Настройки загрузчиков
      module: {
        rules: [
          // Загрузчик для картинок
          {
            test: /.(png|jpe?g|gif|svg)$/,
            use: [
              'file-loader'
            ]
          }
        ]
      }
    };

• Здесь мы используем file-loader, который автоматически обрабатывает все картинки и копирует их в указанную директорию output.path.

3. Создание директорий и структуры проекта:

• Создайте папку src в корневой директории проекта, если ее еще нет.
• Внутри папки src создайте папки для хранения картинок и добавьте соответствующие файлы, например images/logo.png и images/background.jpg.

4. Использование картинок в JavaScript-файлах:

• Импортируйте нужные изображения в JavaScript-файлах. Например, в src/index.js:

     import logoImage from './images/logo.png';
     import background from './images/background.jpg';

• Вы можете использовать эти переменные в коде для отображения картинок:

     const logo = document.createElement('img');
     logo.src = logoImage;
     
     const body = document.querySelector('body');
     body.style.backgroundImage = `url(${background})`;

5. Сборка проекта:

• Добавьте скрипты в файл package.json для удобной сборки и запуска проекта:

     "scripts": {
       "build": "webpack --mode production",
       "start": "webpack serve --mode development --open"
     }

• Запустите команду npm run build для сборки проекта. Картинки будут скопированы в директорию dist вместе с остальными файлами.
• Теперь вы можете использовать бандл bundle.js в вашем веб-приложении, где картинки будут отображаться из директории dist.

В результате после завершения сборки проекта с помощью Webpack, все картинки из указанной директории src/images будут скопированы в директорию dist вместе со сгенерированным бандлом JavaScript. Вы можете настроить путь output.path, чтобы картинки копировались в нужную вам директорию внутри dist.