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

19.10.2021
Пошаговое описание принципов работы Webpack, создания проектов, установка необходимых пакетов, настройка webpack 5. Обработка html, css, scss, sass, pug, images, fonts. Подключение jQuery, bootstrap, babel-loader. На развитие канала: Карта (RUB): 4149 4993 7241 7129 Карта ПриватБанка (USD): 4731 1856 1108 4077 Карта ПриватБанка (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/kopijevskiy Ссылка на Github - https://github.com/vitalii-kopiievskiy/webpack-template Официальный сайт 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

Похожие видео

Показать еще