Структура курса:
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
- Глобальное управление сборкой
