Как с помощью Webpack копировать статические файлы
- 30 марта 2023
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 помогает сократить время на разработку, сборку и тестирование проекта, изучите отдельный курс по этому инструменту.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше




Жадные алгоритмы. Задачи о размене, рюкзаке и о задачах
Мы добавили задачу в вашу задачу о задачах, чтобы вы решали задачу, пока решаете задачу.
- 2 мая 2023

5 книг по паттернам проектирования, которые улучшат ваш код
Каждый найдёт подходящее для себя.
- 18 апреля 2023

В чём разница между интерфейсами и типами в TypeScript
Отвечаем на популярный вопрос с собеседований.
- 14 апреля 2023

Как собрать проект на Webpack. Простой гайд для новичков
Простейший пример для тех, кому надо разобраться по работе или учёбе.
- 7 апреля 2023

XSS-уязвимости и как их избежать
Разбираемся в популярном типе атак в вебе.
- 7 апреля 2023

