Авторизация

Я в деле!

Средний

14 уроков

Курс

Webpack 2

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

#4 — Pug

Мая

2017

Автор урока:

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

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

лайка

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

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

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

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

yarn add pug pug-loader -D

1	yarn add pug pug-loader -D

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

UNMET PEER DEPENDENCY pug@>=2.0.0-beta3 <3

1	UNMET PEER DEPENDENCY pug@>=2.0.0-beta3 <3

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

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

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

touch source/index.pug

1	touch source/index.pug

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

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

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 и внесем некоторые изменения в конфиг.

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
                }
            }
        ]
    }
};

module.exports = {

entry: PATHS.source + '/index.js',

output: {

path: PATHS.build,

filename: '[name].js'

plugins: [

new HtmlWebpackPlugin({

})

module: {

rules: [

{

test: /\.pug$/,

loader: 'pug-loader',

options: {

pretty: true

}

]

}

};

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

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

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

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

yarn run start
yarn run serv

1 2	yarn run start yarn run serv

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

git add .
git commit -m "наш коммит"

1 2	git add . git commit -m "наш коммит"

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

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

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

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

mkdir -p source/pages/{index,blog}
touch source/pages/base.pug
touch source/pages/index/index.pug
touch source/pages/blog/blog.pug

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

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

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

extends ../base
block title
    | Index page
block main
    h1 page index-pug

extends ../base

block title

| Index page

block main

h1 page index-pug

blog.pug

extends ../base
block title
    | Blog page
block main
    h1 page blog-pug

extends ../base

block title

| Blog page

block main

h1 page blog-pug

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

mkdir -p source/components/menu
touch source/components/menu/menu.js

1 2	mkdir -p source/components/menu touch source/components/menu/menu.js

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

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

touch source/pages/index/index.js
touch source/pages/blog/blog.js

1 2	touch source/pages/index/index.js touch source/pages/blog/blog.js

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

index.js

import createMenu from '../../components/menu/menu';
var menu = createMenu(['Главная','Блог'], 'menu');
document.body.appendChild(menu);

console.log('in index.js')

import createMenu from '../../components/menu/menu';

var menu = createMenu(['Главная','Блог'], 'menu');

document.body.appendChild(menu);

console.log('in index.js')

blog.js

import createMenu from '../../components/menu/menu';
var menu = createMenu(['Главная','Блог'], 'menu');
document.body.appendChild(menu);

console.log('in blog.js')

import createMenu from '../../components/menu/menu';

var menu = createMenu(['Главная','Блог'], 'menu');

document.body.appendChild(menu);

console.log('in blog.js')

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

$ rm source/{menu.js,index.js,index.pug}

1	$ rm source/{menu.js,index.js,index.pug}

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

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: {..}
};

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'],

}),

new HtmlWebpackPlugin({

filename: 'blog.html',

chunks: ['blog'],

})

module: {..}

};

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

yarn run start
yarn run serv

1 2	yarn run start yarn run serv

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

http://127.0.0.1:8080/
in index.js
http://127.0.0.1:8080/blog.html
in blog.js

http://127.0.0.1:8080/

in index.js

http://127.0.0.1:8080/blog.html

in blog.js

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

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

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

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

Pug Webpack вебпак Видеокурс Видеоурок Препроцессор Шаблонизатор

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

Делись:

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

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

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