Как с помощью Webpack копировать статические файлы

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

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование специального плагина CopyWebpackPlugin. Рассмотрим подробнее, как это делать.

Как скопировать файлы в каталог сборки

Плагин CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию.

Для начала установите CopyWebpackPlugin в свой проект:

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

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // ваша конфигурация Webpack здесь
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets'),
          to: path.resolve(__dirname, 'dist/assets')
        }
      ]
    })
  ]
};

В плагине содержится массив объектов patterns. Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns.

Каждый объект-шаблон содержит свойство from, оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  //ваша конфигурация Webpack здесь

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'src/images', to: 'dist/images' },
        { from: 'src/index.html', to: 'dist' },
      ],
    }),
  ],
};

В примере первый объект-шаблон копирует каталог images из src в dist/images, а второй — копирует файл index.html из src в dist.

Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

Для более детальной настройки копирования файлов существуют другие опции, доступные в CopyWebpackPlugin, их подробное описание можно прочитать в документации.

Другие способы

Кроме CopyWebpackPlugin, существуют и другие плагины и загрузчики, их также часто называют лоадерами, которые позволяют копировать статические файлы в каталог сборки.

Лоадерfile-loader позволяет копировать статические файлы в указанную папку при сборке проекта.

Чтобы использовать file-loader, установите его с помощью npm:

npm install file-loader --save-dev

Затем добавьте его в конфигурационный файл webpack.config.js:

module.exports = {
  // ... ваша конфигурация webpack ...

  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
    ],
  },
};

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадерurl-loader работает аналогично file-loader, но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev

Затем добавить в конфигурационный файл webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images. Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.