Курс Webpack v4

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Про курс

Просунутий і ємний курс

Ви вивчите всі можливі теми, які відносяться до Webpack: від основ ефективної збірки проєкту до просунутих підходів на кшталт code splitting і shimming.

З самих азів

Ми маємо на увазі, що ви не знайомі з Webpack, але хочете освоїти його та інші технології, які використовуються в продакшені на сучасних проєктах.

У комфортному темпі

Ми надамо вам весь матеріал за курсом, щоб ви у своєму ритмі займалися вивченням Webpack.

Структура курсу

1. Знайомство з webpack

— Что такое webpack?
— Bundler vs task runner
— Отличия webpack от остальных решений
— Dependency graph
— Самый простой запуск webpack: config-free, CLI
— Разработка самой простой конфигурации webpack
— Типы конфигураций: Объект, Функция, Промис
— Подключение HTML

2. основи webpack

— Запуск webpack через Node API
— Что такое Loader
— Что такое Plugin
— Настройка сервера для разработки
— webpack-dev-server
— webpack-dev-middleware
— Hot module replacement

3. Завантаження коду

— Сборка JavaScript
— Чистый JavaScript
— Транспайлинг
— Сборка React
— Композиция конфигурации: разделение конфигураций на development и production
— Сборка CSS
— CSS Modules
— Загрузка PostCSS

4. Завантаження ассетів

— Улучшенная композиция конфигурации
— Перевод конфигурации на ESM
— Вынесение частей конфигурации в модули
— Source maps
— Загрузка изображений
— Загрузка лодером
— Загрузка инлайн
— Загрузка SVG: React-компонент, атрибут src, CSS
— Загрузка шрифтов
— Загрузка лодером
— Загрузка Google-шрифтов

5. Оптимізація складання

— Разбор webpack runtime
— Переменные окружения и feature flags
— Анализ сборки
— Оптимизация режимов сборки: development, production
— JavaScript
— Минификация
— Tree shaking
— Scope hoisting
— Dead code elimination

6. Просунута оптимізація

— CSS
— Отделение CSS от сборки
— autoprefixer
— Минификация
— Оптимизация изображений
— Деплоймент сборки
— Long term caching

7. У довгу подорож

— Что такое чанк, модуль, зависимость
— Code splitting
— Bundle Splitting
— Manifest management
— Polyfilling
— gzip-компрессия сборки
— Настройка publicPath
— Продвинутая отладка сборки

8. Копаємо ще глибше

— Проблемы, связанные с code splitting и их решение
— Code splitting React-приложений
— Shimming
— Глобальное управление сборкой