Авторизация

Средний

14 уроков

Курс

Webpack 2

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

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

Мая

2017

Автор урока:

Дмитрий Ковальчук

комментариев

лайка

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать 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

yarn add extract-text-webpack-plugin -D

1	yarn add extract-text-webpack-plugin -D

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

touch webpack/css.extract.js

1	touch webpack/css.extract.js

css.extract.js

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'),
        ],
    };
};

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

const extractCSS = require('./webpack/css.extract');

if (env === 'production') {
    return merge([
        common,
        extractCSS()
    ]);
}

const extractCSS = require('./webpack/css.extract');

if (env === 'production') {

return merge([

common,

extractCSS()

]);

}

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

yarn run start
yarn run build

1 2	yarn run start yarn run build

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

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

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

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

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

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

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

extract-text-plugin Webpack вебпак Видеокурс Видеоурок

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

Делись:

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

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

Для отправки комментария вам необходимо авторизоваться.