Перенос статических файлов в Webpack: из /static/ в /build/
Быстрый ответ
Для копирования статических файлов в директорию сборки используйте CopyWebpackPlugin
. Внесите его в конфигурационный файл webpack.config.js
следующим образом:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ...
plugins: [
new CopyWebpackPlugin({
patterns: [{ from: 'public', to: 'build' }]
})
]
};
Таким образом, файлы из директории public
автоматически копируются в build
при каждом запуске webpack.
Подробное рассмотрение загрузчиков: использование file-loader и url-loader
Не ограничивайтесь только плагинами. Познакомимся с file-loader
и url-loader
, которые позволяют загружать ресурсы прямиком в JavaScript-модули.
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
}
Эти загрузчики осуществляют преобразование вызовов import
/require()
файла в URL, а сам файл перемещают в выходную директорию. Варьируя говорок, эти загрузчики — настоящие волшебники среди инструментов Webpack!
Инструменты Webpack 5: Модули ресурсов
В свежей версии Webpack 5 вместо file-loader появились Модули ресурсов. Они позволили интегрировать ресурсы напрямую в сборку.
module.exports = {
// ...
output: {
assetModuleFilename: 'images/[hash][ext][query]'
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
};
Модули ресурсов предусматривают пять типов ассетов: asset/resource
, asset/inline
, asset/source
, asset
и разумное правило asset/size-limit
, которое выбирает между asset/resource
и asset/inline
в зависимости от размера файла.
Настройка и советы для продвинутых пользователей
С CopyWebpackPlugin
вы можете сохранить исходную структуру директорий:
new CopyWebpackPlugin({
patterns: [
{ from: 'source', to: 'build/[path][name].[ext]' },
],
}),
Контролирование процесса кэширования
Чтобы повысить эффективность кэширования, используйте [hash]
или [contenthash]
в именах файлов:
output: {
filename: 'scripts/[name].[contenthash].js',
assetModuleFilename: 'assets/[hash][ext][query]'
}
Групповое копирование с применением require.context
Для группового импорта файлов воспользуйтесь require.context()
:
const images = require.context('./images', false, /\.png$/);
images.keys().forEach(images);
Этот метод обеспечивает более эффективное управление файлами.
Визуализация
Представьте себе Webpack в роли усердного секретаря, перекладывающего документы:
🗂️ Вебпак, Секретарь 🗂️ Задача: Переместить файлы из "📂 Исходного Каталога" в "📁 Каталог Сборки"
Используя CopyWebpackPlugin
:
const CopyWebpackPlugin = require('copy-webpack-plugin');
// Добавляем в конфигурацию Webpack
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'public', to: 'build' }
]
})
]
Теперь файлы аккуратно отсортированы и разложены по местам:
📂public/. ➡️ 🗄️ ➡️ 📁build/.
Обработка ошибок и отладка
Если процесс копирования не соответствует вашим ожиданиям, проверьте совместимость версии плагина с текующей версией Webpack. Обращайте внимание на сообщения в консоли и используйте их для выявления проблем.Помните, что отладка — это процесс, схожий с проведением следствия.
Полезные материалы
- copy-webpack-plugin – npm – для копирования файлов и директорий в webpack.
- Plugins | webpack – официальное руководство по использованию плагинов webpack.
- Asset Management | webpack – руководство по управлению активами в вашем проекте.
- Configuration | webpack – подробности настройки webpack.
- CopyWebpackPlugin | webpack – официальное руководство по настройке
copy-webpack-plugin
. - GitHub – webpack-contrib/copy-webpack-plugin – репозиторий
copy-webpack-plugin
на GitHub.