Перенос статических файлов в 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. Обращайте внимание на сообщения в консоли и используйте их для выявления проблем.Помните, что отладка — это процесс, схожий с проведением следствия.

Полезные материалы

1. copy-webpack-plugin – npm – для копирования файлов и директорий в webpack.
2. Plugins | webpack – официальное руководство по использованию плагинов webpack.
3. Asset Management | webpack – руководство по управлению активами в вашем проекте.
4. Configuration | webpack – подробности настройки webpack.
5. CopyWebpackPlugin | webpack – официальное руководство по настройке copy-webpack-plugin.
6. GitHub – webpack-contrib/copy-webpack-plugin – репозиторий copy-webpack-plugin на GitHub.