#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
|
1 |
yarn add extract-text-webpack-plugin -D |
Создадим файл для конфигурации.
|
1 |
touch webpack/css.extract.js |
css.extract.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = function(paths) { return { module: { rules: [ { test: /\.scss$/, include: paths, use: ExtractTextPlugin.extract({ publicPath: '../', fallback: 'style-loader', use: ['css-loader','sass-loader'], }), }, { test: /\.css$/, include: paths, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader', }), }, ], }, plugins: [ new ExtractTextPlugin('./css/[name].css'), ], }; }; |
Обратите внимание, что мы будем тестировать и css и scss. В целом, данный код я взял из официальной документации плагина, разумеется, добавив что-то от себя. На момент написания данного ролика, я ещё не придумал более элегантного решения. Если у вас есть соображения, как улучшить или оптимизировать код — пишите в комментариях к видео. В любом случае, представленный мною пример имеет право на жизнь. Задачу он выполняет, а это, пожалуй, самое главное.
Пояснения к коду
Я прокомментирую здесь, пожалуй, некоторые моменты.
Фактически создание и подключение отдельных css-файлов выполняет extract-text-plugin, т.е. он заменяет собой style-loader. Однако в тех случаях, когда extract-text-plugin не может выполнить свою работу, будет применен fallback: style-loader. Так рекомендуется писать в документации.
Далее обратите внимание на publicPath — его обязательно нужно указать для того, чтобы пути к картинкам для фоновых изображений, указанные в css-файлах, были правильными после сборки.
Как я говорил выше, именно в моём примере, я подключу extractCSS именно в продакшен. Не обязательно у вас будет также.
webpack.config.js
|
1 2 3 4 5 6 7 8 |
const extractCSS = require('./webpack/css.extract'); if (env === 'production') { return merge([ common, extractCSS() ]); } |
Давайте убедимся, что всё работает так, как мы ожидали.
Проверять мы будем только сборку.
|
1 2 |
yarn run start yarn run build |
Перед тем, как мы перейдем в браузер, обратите внимание вот на что.
В папке build у нас постепенно вырисовывается готовый “классический” набор файлов:
- — HTML-файлы лежат в корне,
- — CSS- и JavaScript-файлы — в соответствующих папках.
Откроем браузер и убедимся, что и здесь всё работает, как надо. Проверим исходный код. ….Отлично.
Делаем наш традиционный коммит.
На этом десятый видеоурок курса по изучению Webpack 2 завершится.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!