Webpack 2 — #4 — Pug

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

0:45 Установка Pug и pug-loader.
1:27 Настройка pug-loader.
2:22 Webpack и Pug на примере многостраничного сайта.

♥ Понравилось? Ставь лайк, чтобы мы продолжали записывать бесплатные и полезные видеоролики!

ツПолезные ссылки к видеоуроку:

ツДобавляйся в друзья:
Дмитрий Ковальчук
  1. Loftschool
  2. loftschool
  3. loftblog
  4. уроки
  5. Веб-дизайн
  6. html
Рекомендации по теме
WEBPACK 2 TUTORIAL 0:06:41

WEBPACK 2 TUTORIAL #4 - Working in a local DevServer and configurations.

Webpack 2 — 0:06:04

Webpack 2 — #4 — Pug

WHAT IS WEBPACK, 0:14:55

WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

WEBPACK + MULTIPLE 0:09:16

WEBPACK + MULTIPLE HTML FILES | Webpack 2 Basics Tutorial

Webpack 2 Tutorial 0:13:05

Webpack 2 Tutorial - Installation and Config

WEBPACK 2 TUTORIAL 0:10:55

WEBPACK 2 TUTORIAL #6 - Multiple HTML Templates.

Webpack 2 - 0:10:22

Webpack 2 - Multiple templates options and RimRaf

THE WEBPACK CORE 0:19:17

THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

Webpack 4 Tutorial 0:02:13

Webpack 4 Tutorial 2: What is Webpack?

Let's Learn Webpack 0:05:11

Let's Learn Webpack 2 - Multiple HTML Files

Webpack 2 - 0:07:08

Webpack 2 - Production vs Development Environment

WEBPACK 2 TUTORIAL 0:17:18

WEBPACK 2 TUTORIAL #2 - Loaders, CSS, SASS, ExtractTextPlugin.

WEBPACK 2 TUTORIAL 0:22:44

WEBPACK 2 TUTORIAL #1 - Introduction & Workspace Setup

Webpack Tutorial for 0:08:21

Webpack Tutorial for Beginners #2 - Installing Webpack & Bundling JS Files

Webpack 2 - 1:42:50

Webpack 2 - A full tutorial

Webpack 2 with 0:07:02

Webpack 2 with Webpack Dev Server Configuration

2 4 0:04:52

2 4 Crear webpack config js

USING THE WEBPACK 0:06:55

USING THE WEBPACK DEV SERVER | Webpack 2 Basics Tutorial

Let's Learn Webpack 0:08:36

Let's Learn Webpack 2 - Multiple Bundles

Webpack 2 - 0:17:16

Webpack 2 - Style, CSS and Sass loaders

Webpack 2 - 0:07:47

Webpack 2 - How to install React and Babel

Webpack 2 - 0:06:27

Webpack 2 - Hot Module Replacement - CSS

Webpack 2 - 0:01:27

Webpack 2 - A Build Tool for Modern JavaScript Applications

Webpack 2 vs 0:03:19

Webpack 2 vs Grunt Gulp || Webpack 2 Tutorial For Beginners 01

Комментарии
Автор

Спасибо, очень долго ждал этого курса!

fess
Автор

Отличный курс. И подробно и материал хорошо подобран - не повторяет другие курсы. Параллельно смотрю teamtreehouse JavaScript FullStack. Курс хороший, но не такой глубокий. У вас и информация плотнее, больше и часто актуальней.
Понравилось, еще раз спасибо.

deniss
Автор

Спасибо за уроки. Параллельно понимаю много трендовых вещей. И начинаю использовать их. Не из-за того что трендовые, а из-за того что реально ускоряют работу. Немного бы подробнее объясняли некоторые команды. Объяснять почему это так работает. Пусть даже я это буду знать, пусть даже объяснения будут повторяться. Все равно что-то будет, чего я не знаю или не до конца понимаю.

veryhightower
Автор

а как можно использовать 1 путь для 10 шаблонов, например. Или для каждой страницы прописывать плагин?

manifestor
Автор

Спасибо. Если кому интересно, советую попробовать данный модуль: pug-html-loader
module.exports = (paths) => {
return {
module: {
rules: [
{
test:/\.pug$/,
exclude: ['/node_modules/'],
use: [
'html-loader',
{
loader: 'pug-html-loader',
query: {
data: {data:'test'},
pretty: true
}
}
]
},
],
},
};
};

ИванНовосёлов-ыш
Автор

Но у меня почему-то pug не компилится в html, на выходе всё равно получается pug

Smyth
Автор

как цепляются файлы index.js и blog.js?

cikada
Автор

Скажите а как в вебшторме инициализировать текст паг доктайп меты и тд

Rock_concerts
Автор

hi! great video although i dont speak russian :p, so, for every new html file, there's that create a new object HtmlWebpackPlugin? please answer to me :)

andresmontoya
Автор

в примере скомпилированный pug файл выкинул из head все что есть 2:16

PavelOmelchenko
Автор

никак не хотел искать скрипты пока не переписал пути entry в конфиге вебпака следующим образом:
...
entry: {
'index': PATHS.source + '/pages/index/index',
'blog': PATHS.source + '/pages/blog/blog'
},
...

uglkfrls
Автор

Зачем Вертолет, чтобы перенести камушек? Я быстрее сверстаю с нуля, чем через эту дичь. Столько ненужных манипуляций

nojik-ejik
Автор

ну видео ничего, но автор много чего пропускает в объяснениях - либо не разбирается, либо пытается ужать, что в принципе нормально

КонстантинХ-уф
Автор

да вы все сговорились чтоли?! а ссылки между страницами нет?? нахера этот бесполезный видос, если самого главного ты не показываешь???
наконецто кто-то сделал две страницы.. но нет бл. это две страницы не ссылающиеся друг на друга.

DemetriyArh
Автор

Зачем в уроке про вебпак использовать всякие непонятные зависимоти, шаблонизаторы... неужели по проще нельзя, извините, урок прекрасный, но появление здесь pug, а так же разработка МНОГОстраничного сайта, это как то странно... ведь сами сказали, что вебпак в паре с реактом, это самый популярный тандем, но откуда тут взялся pug, зачем усложнять урок

Hazratgs
Автор

Объяснение для каких то про, для новичков это не подходит

fmleglrmglrml