Средний
14 уроков
Курс
Webpack 2
Webpack 2 — один из самых мощных и гибких инструментов для frontend-сборки. В чем его преимущества, какие проблемы он решает и как с ним работать — в практическом видеокурсе от основателя LoftSchool&LoftBlog Дмитрия Ковальчука.

#10 — Extract-text-plugin — плагин для подключения CSS-файлов

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack 2.

При помощи css-loader и style-loader на предыдущих уроках мы подружили css с Webpack. При этом весь css-код добавлялся в javascript-бандл, что, в общем-то, неплохо. Однако, когда мы имеем дело с действительно большими css-файлами, мы можем выиграть в скорости загрузки приложения, вынеся css-код в отельные файлы, которые будут загружаться в браузере параллельно с основным javascript-бандлом.

Для этого существует специальный плагин extract-text-webpack-plugin, который мы и рассмотрим на этом видеоуроке.

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

Для разработки я буду подключать CSS инлайном прямо в html, что мной и было сделано на предыдущих уроках.
А для продакшена подключу по старинке, в виде отдельных файлов. Для этого я даже создам отдельный конфиг-файл. Но всему своё время.

Установка плагина extract-text-plugin

Давайте начнем с установки плагина.

Полезная ссылка
https://github.com/webpack-contrib/extract-text-webpack-plugin

Создадим файл для конфигурации.

css.extract.js

Обратите внимание, что мы будем тестировать и css и scss. В целом, данный код я взял из официальной документации плагина, разумеется, добавив что-то от себя. На момент написания данного ролика, я ещё не придумал более элегантного решения. Если у вас есть соображения, как улучшить или оптимизировать код — пишите в комментариях к видео. В любом случае, представленный мною пример имеет право на жизнь. Задачу он выполняет, а это, пожалуй, самое главное.

Пояснения к коду

Я прокомментирую здесь, пожалуй, некоторые моменты.

Фактически создание и подключение отдельных css-файлов выполняет extract-text-plugin, т.е. он заменяет собой style-loader. Однако в тех случаях, когда extract-text-plugin не может выполнить свою работу, будет применен fallback: style-loader. Так рекомендуется писать в документации.

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

Как я говорил выше, именно в моём примере, я подключу extractCSS именно в продакшен. Не обязательно у вас будет также.

webpack.config.js

Давайте убедимся, что всё работает так, как мы ожидали.
Проверять мы будем только сборку.

Перед тем, как мы перейдем в браузер, обратите внимание вот на что.

В папке build у нас постепенно вырисовывается готовый “классический” набор файлов:

  • — HTML-файлы лежат в корне,
  • — CSS- и JavaScript-файлы — в соответствующих папках.

Откроем браузер и убедимся, что и здесь всё работает, как надо. Проверим исходный код. ….Отлично.
Делаем наш традиционный коммит.

На этом десятый видеоурок курса по изучению Webpack 2 завершится.

Приятного всем просмотра! Учитесь с удовольствием!

ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы