Описание

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

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