Настройка Webpack 5 для начинающих. Описание принципа работы webpack. Html, css, scss, pug, jQuery

Пошаговое описание принципов работы Webpack, создания проектов, установка необходимых пакетов, настройка webpack 5. Обработка html, css, scss, sass, pug, images, fonts. Подключение jQuery, bootstrap, babel-loader.

В конфигурацию Webpack внесены изменения в связи с выходом новой webpack-dev-server версии 4 и выше:

На развитие канала:

Binance ID: 439718976
Карта USD (Visa): 4731 1856 1108 4077
Карта USD (Master Card): 5168 7520 1955 1822
Карта EUR (Master Card): 5168 7451 2144 3672
Карта UAH: 4731 1856 1217 7318

00:00 - Введение
00:22 - Теория. Создание и инициализация проекта.
03:23 - Теория. Режимы разработки.
03:53 - Теория. Папка src.
04:07 - Теория. Папка dist.
04:50 - Теория. Входные точки entry points, выходные точки output points.
06:29 - Теория. Введение plugins, loaders, asset modules.
06:29 - Теория. Loaders.
08:01 - Теория. Plugins.
08:39 - Теория. Asset modules.
08:51 - Теория. Описание назначения plugins, loaders, asset modules.
10:28 - Теория. Принципы работы webpack.
12:17 - Создание и инициализация проекта.
18:27 - MODE. Задание режима разработки через свойство mode.
19:37 - HTML. Настройка компиляции html. HtmlWebpackPlugin.
20:48 - STYLES. Настройка компиляции стилей. Sass-loader, post-css-loader, css-loader, style-loader, MiniCssExtractPlugin.
23:50 - SASS, SCSS.Настройка компиляции файлов препроцессоров.
25:27 - Настройка кеширования css файлов.
26:59 - IMAGES. Настройка компиляции изображений.
29:30 - CLEAN. Очистка папки dist.
29:49 - FONTS. Подключение шрифтов.
30:48 - PUG. Подключение шаблонизатора.
33:14 - BABEL-LOADER. Обработка JS.
35:09 - DEV-TOOL. Настройка исходных карт.
35:41 - jQuery. Подключение библиотеки.
36:14 - BOOTSTRAP. Подключение библиотеки.
37:05 - ENTRY POINTS. Импорт нескольких файлов.
38:05 - OPTIMIZATION. Разделение файлов.
39:31 - Заключение.

[artuchka-profi]

редко пишу комментарии, но здесь...
с первых минут становится понятно, что материал сухой и выжимка полезной информации (НЕ ТОЛЬКО ДЛЯ НОВИЧКА) максимальна
однозначно лайк

[dariasuhinina]

впервые ставила обучающее видео на 0.75, а не 1.5 )) благодарю автора за видео, вероятно, это одно из лучших видео на тему вебпака

[tukituki]

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

[velessn]

Самое четкое объяснение материала, ничего лишнего, теория с практическим подкреплением. Видно, что человек старался, убил кучу времени на подготовку к теоретической части. Вы очень хорошо подаете материал. Поддержу лайком и комментарием Ваш канал.

[ЛенаКиселева-вв]

Супер туториал, лучший для меня по настройке и пониманию webpack
Благодарю за труд!

у кого возникла проблема автоматической перезагрузке после изменения html
Необходимо добавить настройки devServer в module.exports
у меня работают следующие

devServer: {
open: true,
hot: true,
port: 'auto',
static: {
directory: './src',
watch: true,
},
},

и в скриптах
"start": "set NODE_ENV=development&&webpack serve",
без --open

[timashoff]

Эталон подачи информации. Теория, практика, сухо, емко, быстро и при этом четко. Все на высоте! Если есть возможность, не забрасывайте канал!

[minecraftvano]

Объяснение на высоте, день потратил на толковую настройку по другим гайдам, где-то заводилась часть, где-то вовсе не завелось, посмотрел ваш гайд и всё стало понятно и взлетело, спасибо!)

[karinaivanova]

Вау! я редко где-то оставляю комментарии, но здесь просто нельзя оставить как есть!!
Подача вау, ничего лишнего. Успеваешь следить за кликами, не нудно ускорять или замедлять. Просто супер видео! Спасибо огромное, очень помогло для тестового и просто быстрого знакомства с технологией!

[krylovDev]

Отличная подача!
Без воды!
Ты большой молодец!
Спасибо за твой труд.
Ты обречён на успех)
Подписка не глядя

[ИгорьТышкевич-иб]

Огромное спасибо, особенно за код на гитхабе. Сколько намучился, повторяя трехчасовое видео владлена, но сборка в итоге не работала. А тут не приходится ничего переписывать с экрана. Лайк, подписка

[motorSolaris]

Мужик, спасибо тебе ОГРОМНОЕ!!! Чётко, понятно, ничего лишнего, ставить скорость видео х1.5 не нужно, сначала теория, потом пример. И стек именно тот, что мне нужен.

[kubris.developer]

Жаль, мало видосов у вас. Прям зашло как никогда ))

[roozegrow]

Где вы были раньше! Очень доступно и по делу! Спасибо вам большое что делитесь своими знаниями, просто выручили!!

[andreydubov]

Все по полочкам в голове разложил. Хороший подход - для понимания сути, а не копипаста чужих плагинов.

[marcusfenix]

Крутий матеріал по базовій настройці Webpack 5! Чіткі роз'яснення без зайвого. Дякую

[M_e_t_a_l_H_e_a_d]

Боже, почему я не нашёл это видео раньше! Наверно самый полезный видос что я смотрел по вебпак. Оно решило все мои нынешние проблемы и задало вектор движения в изучении данного инструмента. Спасибо! С меня подписка, буду рекомендовать канал и видео, всё как полагается)

[VaultBoyVaultBoy]

*Превосходный материал! Очень благодарен за видео. Даже у меня, начинающего (2-3 месяца в самостоятельном обучении) не осталось вопросов. Все предельно ясно! Лайк, подписка, спасибо!*

[ПавелЧипула-сп]

Базовая настройка (детально), лаконичнно, хорошая работа - спасибо

[mrqvarta]

Ждем новое видео. Хорошо рассказал, без воды. Спасибо огромное за труд.

[nidi]

Благодарю вас. Прекрасно видео!!!! Всё понятно и подробно.