#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
|
1 |
yarn add pug pug-loader -D |
В консоли вы можете увидеть сообщение
|
1 |
UNMET PEER DEPENDENCY pug@>=2.0.0-beta3 <3 |
Не пугайтесь! Это просто говорит о том, что вы не установили Webpack глобально.
Мы этого не сделали сознательно. Так что всё в порядке.
2. Создание первого pug-файла
Создадим файл index.pug.
|
1 |
touch source/index.pug |
Добавим в него самую базовую разметку для будущего html-документа. Правда, это именно pug-файл. И из него мы будем генерировать html, совсем скоро.
|
1 2 3 4 5 6 7 8 |
doctype html html head meta(charset = 'utf-8') meta(name='viewport', content="initial-scale=1.0, width=device-width") title Webpack app body h1 test pug |
3. Настройка pug-loader
Откроем webpack.config.js и внесем некоторые изменения в конфиг.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
module.exports = { entry: PATHS.source + '/index.js', output: { path: PATHS.build, filename: '[name].js' }, plugins: [ new HtmlWebpackPlugin({ template: PATHS.source + '/index.pug', }) ], module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true } } ] } }; |
— “template” (HtmlWebpackPlugin) — путь до шаблона.
— “test: /\.pug$/” — регулярное выражение, которое говорит о том, что работать будем только с файлами, которые заканчиваются на “.pug”.
— “pretty: true” — просим pug-loader расставить отступы и переносы строк (иначе получим весь html-код в одну строку).
Запускаем вебпак и сервер (в отдельной вкладке терминала).
|
1 2 |
yarn run start yarn run serv |
Самое время сделать очередной коммит:
|
1 2 |
git add . git commit -m "наш коммит" |
4. Webpack и Pug — на примере многостраничного сайта
Webpack очень удобен для создания сингл пэйч апликейшен — очень быстрых и современных одностраничных приложений. Он отлично работает в паре с React, и большинство уроков, которые вы найдете в интернете, посвящены именно этому его аспекту.
Я же предлагаю рассмотреть работу с Webpack и Pug на примере 2х-страничного сайта. Первая страница — index, вторая — blog.
Для каждой страницы заведем отдельную папку. Для каждой страницы будет своя точка входа.
|
1 2 3 4 |
mkdir -p source/pages/{index,blog} touch source/pages/base.pug touch source/pages/index/index.pug touch source/pages/blog/blog.pug |
У обоих страниц есть общее, например, секция head. Общее вынесем в отдельный файл — base.pug.
base.pug
|
1 2 3 4 5 6 7 8 9 |
doctype html html head meta(charset = 'utf-8') meta(name='viewport', content="initial-scale=1.0, width=device-width") title block title body block main |
index.pug
|
1 2 3 4 5 |
extends ../base block title | Index page block main h1 page index-pug |
blog.pug
|
1 2 3 4 5 |
extends ../base block title | Blog page block main h1 page blog-pug |
Помимо страниц, мы также будем иметь дело с «компонентами»: например, слайдер, меню и пр.
Компоненты могут присутствовать либо на нескольких страницах, либо только на одной странице.
Пока у нас только один компонент — это меню.
|
1 2 |
mkdir -p source/components/menu touch source/components/menu/menu.js |
Содержимое menu.js оставляем таким же, как описывали выше.
Помимо шаблонов, в папке каждой страницы будут содержаться javascript-файлы.
|
1 2 |
touch source/pages/index/index.js touch source/pages/blog/blog.js |
Каждый javascript-файл будет соответствовать отдельной html-странице и будет вызывать компонент меню. В конце каждого javascirpt-файла мы будем выводить сообщение в консоль о том, на какой странице мы сейчас находимся. Это поможет нам быть уверенными в том, что мы, например, не грузим одновременно оба файла, т.е. загружается именно то, что нужно.
index.js
|
1 2 3 4 5 |
import createMenu from '../../components/menu/menu'; var menu = createMenu(['Главная','Блог'], 'menu'); document.body.appendChild(menu); console.log('in index.js') |
blog.js
|
1 2 3 4 5 |
import createMenu from '../../components/menu/menu'; var menu = createMenu(['Главная','Блог'], 'menu'); document.body.appendChild(menu); console.log('in blog.js') |
Старые файлы удалим.
|
1 |
$ rm source/{menu.js,index.js,index.pug} |
В webpack.config.js отредактируем блок plugins и блок entry.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
module.exports = { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js' }, output: { path: PATHS.build, filename: './js/[name].js' }, plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index'], template: PATHS.source + '/pages/index/index.pug' }), new HtmlWebpackPlugin({ filename: 'blog.html', chunks: ['blog'], template: PATHS.source + '/pages/blog/blog.pug' }) ], module: {..} }; |
Запустим Webpack и сервер.
|
1 2 |
yarn run start yarn run serv |
Посмотрим в браузере, что у нас получилось.
Первая страница — index.html.
В консоли всё в порядке, как мы и ожидали. Видим сообщение «in index.js»
На второй странице тоже всё хорошо. В консоли «in blog.js»
|
1 2 3 4 |
http://127.0.0.1:8080/ in index.js http://127.0.0.1:8080/blog.html in blog.js |
По аналогии можно добавлять любое количество страниц и компонентов.
На этом подойдет к концу четвертый видеоурок курса по изучению Webpack 2.
Приятного всем просмотра! Учитесь с удовольствием!
ツПолезные ссылки к видеоуроку:
✔ Исходники на GitHub
✔ Видеоурок по Yarn
✔ Получить профессию «Веб-разработчик»
✔ Прокачаться на «Продвинутом курсе по веб-разработке»
✔ Подписывайтесь на канал, новые видео выходят каждую неделю.
Оставь комментарий!