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

#4 — Pug

Всем привет! Меня зовут Ковальчук Дмитрий. Вы смотрите Лофтскул. Мы продолжаем изучать Webpack. Сегодня мы подружим Webpack с Pug. Pug — это шаблонизатор и html-препроцессор, написанный на javascript для node.js. Pug имеет целый ряд преимуществ по сравнению с обычным HTML. Подробнее вы познакомитесь с Pug на соответствующих уроках и вебинарах. Но даже если вы вообще ранее ничего не слышали про Pug, то данный урок даст вам достаточное представление о Pug, как о препроцессоре.

Если не поленитесь, то прямо сейчас поставьте видеоурок на паузу и загляните на сайт официальной документации Pug. 10 минут вашего времени — и многие вопросы будут разрешены.

1. Установка Pug и pug-loader

Для работы с Pug нам понадобится установить два плагина: pug и pug-loader

В консоли вы можете увидеть сообщение

Не пугайтесь! Это просто говорит о том, что вы не установили Webpack глобально.
Мы этого не сделали сознательно. Так что всё в порядке.

2. Создание первого pug-файла

Создадим файл index.pug.

Добавим в него самую базовую разметку для будущего html-документа. Правда, это именно pug-файл. И из него мы будем генерировать html, совсем скоро.

3. Настройка pug-loader

Откроем webpack.config.js и внесем некоторые изменения в конфиг.

— “template” (HtmlWebpackPlugin) — путь до шаблона.

— “test: /\.pug$/” — регулярное выражение, которое говорит о том, что работать будем только с файлами, которые заканчиваются на “.pug”.

— “pretty: true” — просим pug-loader расставить отступы и переносы строк (иначе получим весь html-код в одну строку).

Запускаем вебпак и сервер (в отдельной вкладке терминала).

Самое время сделать очередной коммит:

4. Webpack и Pug — на примере многостраничного сайта

Webpack очень удобен для создания сингл пэйч апликейшен — очень быстрых и современных одностраничных приложений. Он отлично работает в паре с React, и большинство уроков, которые вы найдете в интернете, посвящены именно этому его аспекту.

Я же предлагаю рассмотреть работу с Webpack и Pug на примере 2х-страничного сайта. Первая страница — index, вторая — blog.

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

У обоих страниц есть общее, например, секция head. Общее вынесем в отдельный файл — base.pug.

base.pug

index.pug

blog.pug

Помимо страниц, мы также будем иметь дело с «компонентами»: например, слайдер, меню и пр.
Компоненты могут присутствовать либо на нескольких страницах, либо только на одной странице.
Пока у нас только один компонент — это меню.

Содержимое menu.js оставляем таким же, как описывали выше.

Помимо шаблонов, в папке каждой страницы будут содержаться javascript-файлы.

Каждый javascript-файл будет соответствовать отдельной html-странице и будет вызывать компонент меню. В конце каждого javascirpt-файла мы будем выводить сообщение в консоль о том, на какой странице мы сейчас находимся. Это поможет нам быть уверенными в том, что мы, например, не грузим одновременно оба файла, т.е. загружается именно то, что нужно.

index.js

blog.js

Старые файлы удалим.

В webpack.config.js отредактируем блок plugins и блок entry.

Запустим Webpack и сервер.

Посмотрим в браузере, что у нас получилось.
Первая страница — index.html.
В консоли всё в порядке, как мы и ожидали. Видим сообщение «in index.js»
На второй странице тоже всё хорошо. В консоли «in blog.js«

По аналогии можно добавлять любое количество страниц и компонентов.

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

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

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

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

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

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

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