Настройка 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 -
Ссылка на Github -
Официальный сайт Webpack -
Сайт среды разработки Webstorm -
Ресурсы npm -
Препроцессоры sass and scss -
Шаблонизатор pug -