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

Robot · 12 Авг 2021

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