Урок 7.7. Webpack

Опубликовано: 27 Февраль 2026
на канале: Web-garage

456

Клон плейлиста на Яндекс.Дзен: https://dzen.ru/suite/3764854c-4f30-4...

🔴 Timecode:

▶ 00:00 || Что такое сборщики приложений
▶ 00:35 || Краткий обзор ТОР-5 сборщиков приложений
▶ 03:13 || Преимущества Webpack
▶ 04:54 || Подготовка приложения к работе с Webpack
▶ 09:08 || Установка webpack
▶ 09:33 || Создание файла webpack.config.js / webpack.config.cjs
▶ 10:07 || Точка входа
▶ 11:42 || Начало установки преобразований
▶ 12:03 || Начало работы с лоадерами (установка CSS-лоадера)
▶ 13:40 || Импорт CSS в точку входа
▶ 14:43 || Установка style-лоадера
▶ 15:44 || Ассеты
▶ 17:23 || Точка выхода
▶ 18:59 || Установка HtmlWebpackPlugin
▶ 22:02 || Static
▶ 22:42 || Установка CopyWebpackPlugin
▶ 24:16 || Первый запуск webpack
▶ 29:17 || Режимы development и production
▶ 30:41 || Установка Webpack Dev Server
▶ 32:23 || Переключение режимов с помощью переменной окружения
▶ 34:38 || Оптимизация CSS
▶ 38:26 || Source maps

WARNING!
Для устранения ошибки, показанной на 37:03: чтобы у вас заработала команда
"build": "cross-env NODE_ENV=production webpack"
(обратите внимание, что здесь без амперсанта),
нужно установить пакет для кросс-платформенной совместимости cross-env. Вот команда: npm i cross-env -D

Команды, которые используются для установки пакетов:
webpack: npm i webpack webpack-cli -D
CSS-лоадер: npm i css-loader -D
style-лоадер: npm i style-loader -D
HtmlWebpackPlugin: npm i html-webpack-plugin -D
CopyWebpackPlugin: npm i copy-webpack-plugin -D
Webpack Dev Server: npm i webpack-dev-server -D
плагин для экстракта CSS-кода: npm i mini-css-extract-plugin -D
плагин для минификации CSS-кода: npm i css-minimizer-webpack-plugin -D

🔗 Сайт webpack'а https://webpack.js.org/
🔗 Ссылка на исходный код: https://github.com/alexeirybak/Web_me...
🔗 Ссылка на готовый результат: https://github.com/alexeirybak/Web_me...

#webpack