Настройка 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 и выше:
1. В файле package.json в скрипте "start" удален флаг --open.
2. В файле конфигурации webpack.config.js добавлен devServer с соответствующими опциями открытия браузера и перезагрузки страницы при изменениях. При этом режим hot (Hot Module Replacement) указывать нет необходимости - в webpack-dev-server v4.0.0 и выше он задействован по умолчанию.
3. Изменен способ запроса изображений в миксине image в фале _image.pug через require.

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

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 - Теория. Создание и инициализация проекта.
01:30 - Теория. Файл package.json и папка node_modules.
03:23 - Теория. Режимы разработки.
03:53 - Теория. Папка src.
04:07 - Теория. Папка dist.
04:32 - Теория. Файл конфигурации webpack.config.js.
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 - Создание и инициализация проекта.
14:22 - SCRIPTS. Настройка скриптов в package.json.
16:25 - NODE_ENV.Настройка переменной окружения в package.json.
17:54 - CONFIG. Создание файла конфигурации webpack.config.js.
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 - Заключение.

Мой профиль в Telegram - https://t.me/JavaAndScript
Ссылка на Github - https://github.com/vitalii-kopiievski...

Официальный сайт Webpack - https://webpack.js.org

Сайт среды разработки Webstorm - https://www.jetbrains.com/ru-ru/webstorm

Ресурсы npm - https://www.npmjs.com

Препроцессоры sass and scss - https://sass-lang.com

Шаблонизатор pug - https://pugjs.org