Для фронтендеров, которые хотят освоить Webpack — один из инструментов, упрощающих разработку. Webpack помогает повысить производительность приложения, оптимизировать код и сократить время на разработку, сборку и тестирование проекта.
Программа курса
Раздел 1. Введение
Узнаем, зачем нужен webpack и как его применить в любом проекте.
- Что такое webpack
- Базовые команды при работе с webpack — файл package.json
- Демо: создание простого базового конфига
Практика
- Задание: сборка тестового проекта
- Решение: пошаговая эталонная реализация
- Тест по первому разделу
Раздел 2. Конфигурационные файлы
Рассмотрим форматы конфигурационных файлов webpack.
- Формат конфигурационных файлов webpack
- Мультистраничные приложения, основные концепции webpack
- Начало работы с конфигами дополнительных инструментов
- Демо: добавление ESLint и Prettier в готовый проект
Практика
- Задание: настройка дополнительных зависимостей
- Решение: пошаговая эталонная реализация
- Тест по второму разделу
Раздел 3. Входная точка приложения
Начнём рассматривать основные концепции работы с webpack.
- Что такое входная точка приложения
- Демо: перенос проекта на webpack
- Демо: мультистраничное приложение
Практика
- Задание: настройка мультистраничного приложения
- Решение: пошаговая эталонная реализация
- Тест по третьему разделу
Раздел 4. Выходная точка и сборка приложения
Рассмотрим концепцию webpack — output.
- Выход из приложения по окончанию разработки. Output
- Нововведения webpack v5
- Оптимизация и кодсплиттинг — вендоры
- Обработчики
- Демо: пример работы asset
Практика
- Задание: оптимизация проекта
- Решение: пошаговая эталонная реализация
- Задание: исправление ошибок и оживление проекта
- Решение: пошаговая эталонная реализация
- Тест по четвёртому разделу
Раздел 5. Webpack-плагины
Разберём концепцию webpack — плагины.
- Что такое плагины и зачем они нужны
- Необходимые в разработке плагины
- Демо: работа необходимых плагинов, развитие сборки, минимальная кастомизация
Практика
- Задание: настройка плагинов
- Решение: пошаговая эталонная реализация
- Задание: создание и поддержка многостраничного приложения
- Решение: пошаговая эталонная реализация
- Тест по пятому разделу
Раздел 6. Режимы разработки
Изучим концепцию webpack — моды.
- Режим разработки
- Production-режим и браузерная поддержка
- Исходные карты
- Демо: работа webpack в зависимости от режима
Практика
- Задание: настройка режимов и их оптимизация
- Решение: пошаговая эталонная реализация
- Тест по шестому разделу
Раздел 7. Подведение итогов
Вспомним, что мы изучили, подведём итоги и закрепим полученные знания.
- Вспомним основные моменты
- Демо: пример работы динамически настраиваемой сборки под несколько страниц
Практика
- Задание: сборка многостраничного приложения
- Решение: пошаговая эталонная реализация
- Подводим итоги курса
- Итоговый тест по курсу
