[Lectrum] Продвинутый курс по Webpack v4, с чистого листа (Андрей Мулык)

​ Продвинутый и ёмкий курс Вы изучите все возможные темы, которые относятся к Webpack: от основ эффективной сборки проекта до продвинутых подходов типа code splitting и shimming. Структура курса: 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 Глобальное управление сборкой