Как настроить ExtractTextWebpackPlugin веб-пакета для создания множества файлов CSS

ВНИМАНИЕ: следующая информация относится только к webpack 3. Если вы используете webpack 4, отметьте MiniCssExtractPlugin.

Объединение активов

Современные веб-приложения содержат массу ресурсов. По соображениям производительности эти ресурсы должны быть уменьшены и объединены (разбиты вместе) в минимальное количество файлов (я знаю, что это чрезмерное упрощение. Производительность - это сложный и тонкий вопрос, и иногда лучше иметь больше файлов - выше сгиба стили, динамическая загрузка модулей и т. д. - но здесь я стараюсь не усложнять).

Упрощенный веб-пакет 101

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

Как указано в документации:

По умолчанию webpack понимает только файлы JavaScript. Загрузчики позволяют webpack обрабатывать другие типы файлов и преобразовывать их в допустимые модули, которые могут быть использованы вашим приложением и добавлены в граф зависимостей.

Итак, с помощью загрузчиков webpack может построить весь граф зависимостей вашего приложения, включая CSS, изображения и шрифты.

css-загрузчик

Этот загрузчик знает, как «требовать» файлы CSS. Он добавляет новый модуль для каждого необходимого файла CSS, содержащего код CSS в виде строки.

загрузчик стилей

Этот загрузчик знает, как использовать модули CSS: для каждого модуля CSS он вставляет элемент стиля на страницу, где вы загружаете пакет JavaScript.

Это полезно для сред разработки или для проектов с небольшим количеством CSS, но этого не хватает почти для каждого веб-приложения в производственной среде.

ExtractTextWebpackPlugin

Это плагин веб-пакета, который удаляет встроенный контент из пакета javascript и записывает его в отдельный файл. Вы можете использовать его в производственных пакетах, чтобы удалить модули CSS из пакета JavaScript и записать код CSS в отдельный файл .css.

Используя следующую конфигурацию веб-пакета:

Мы говорим webpack: «извлечь текст из загруженных файлов CSS с помощью этого плагина и передать извлеченный текст в файл с именем styles.css», поэтому он выдаст два файла: main.js (имя точки входа по умолчанию main) и styles.css.

Несколько точек входа

Вы можете определить несколько точек входа для своего приложения. Каждая точка входа приведет к другому графу зависимостей и создаст другой пакет JavaScript.

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

Webpack создаст два разных файла JavaScript, public.js и private.js. Чтобы ExtractTextWebpackPlugin выдавал отдельный файл CSS для каждой точки входа, вам нужно изменить объявление плагина:

Теперь вы получите два файла CSS: private.css и public.css.

Извлечение нескольких пакетов CSS

Иногда вам может потребоваться создать несколько пакетов CSS для одной точки входа (например, в тематическом приложении). Вы можете добиться этого, используя разные экземпляры ExtractTextWebpackPlugin в сочетании с соглашениями об именах файлов.

Допустим, у вашего приложения две темы: плотная и разреженная. Если вы правильно организуете свои файлы CSS, вы можете использовать разные экземпляры ExtractTextWebpackPlugin для извлечения каждой темы в отдельный файл.

Предполагая, что файлы вашего проекта расположены следующим образом:

src
├── index.js
└── themes
    ├── dense
    │   ├── content.css
    │   ├── footer.css
    │   └── index.css
    └── sparse
        ├── content.css
        ├── footer.css
        └── index.css

Вы можете использовать следующую конфигурацию для создания файла CSS для каждой темы.

Мы начинаем с создания экземпляра ExtractTextWebpackPlugin для каждой темы. Затем мы определяем два разных rules, по одному для каждого экземпляра. Каждое правило определяет test, используя имя каталога для фильтрации соответствующих файлов CSS. Наконец, каждый экземпляр подключаемого модуля добавляется в plugins раздел конфигурации.

С такой конфигурацией вы получите один main.js файл, но два отдельных файла CSS: dense.css и sparse.css.

Outro

Производительность имеет значение, но это довольно сложная тема, зачастую противоречащая здравому смыслу. Например, объединение ресурсов вашего приложения в один файл необходимо только в том случае, если вы используете HTTP / 1. С HTTP / 2 многие файлы могут быть загружены одновременно, что позволяет вам точно настроить активы, доставляемые клиенту, вместо того, чтобы отправлять всем один и тот же громоздкий пакет.

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