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

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

Продвинутый и ёмкий курс
Вы изучите все возможные темы, которые относятся к Webpack: от основ эффективной сборки проекта до продвинутых подходов типа code splitting и shimming.

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

Спойлер: 1. Знакомство с webpack

1. Что такое webpack?
2. Bundler vs task runner
3. Отличия webpack от остальных решений
4. Dependency graph
5. Самый простой запуск webpack: config-free, CLI
6. Разработка самой простой конфигурации webpack
7. Типы конфигураций: Объект, Функция, Промис
8. Подключение HTML

Спойлер: 2. Основы webpack

1. Запуск webpack через Node API
2. Что такое Loader
3. Что такое Plugin
4. Настройка сервера для разработки
5. webpack-dev-server
6. webpack-dev-middleware
7. Hot module replacement

Спойлер: 3. Загрузка кода

1. Сборка JavaScript
2. Чистый JavaScript
3. Транспайлинг
4. Сборка React
5. Композиция конфигурации: разделение конфигураций на development и production
6. Сборка CSS
7. CSS Modules
8. Загрузка PostCSS

Спойлер: 4. Загрузка ассетов

1. Улучшенная композиция конфигурации
2. Перевод конфигурации на ESM
3. Вынесение частей конфигурации в модули
4. Source maps
5. Загрузка изображений
6. Загрузка лодером
7. Загрузка инлайн
8. Загрузка SVG: React-компонент, атрибут src, CSS
9. Загрузка шрифтов
10. Загрузка лодером
11. Загрузка Google-шрифтов

Спойлер: 5. Оптимизация сборки

1. Разбор webpack runtime
2. Переменные окружения и feature flags
3. Анализ сборки
4. Оптимизация режимов сборки: development, production
5. JavaScript
6. Минификация
7. Tree shaking
8. Scope hoisting
9. Dead code elimination

Спойлер: 6. Продвинутая оптимизация

1. CSS
2. Отделение CSS от сборки
3. autoprefixer
4. Минификация
5. Оптимизация изображений
6. Деплоймент сборки
7. Long term caching

Спойлер: 7. В долгое путешествие

1. Что такое чанк, модуль, зависимость
2. Code splitting
3. Bundle Splitting
4. Manifest management
5. Polyfilling
6. gzip-компрессия сборки
7. Настройка publicPath
8. Продвинутая отладка сборки

Спойлер: 8. Копаем ещё глубже

1. Проблемы, связанные с code splitting и их решение
2. Code splitting React-приложений
3. Shimming
4. Глобальное управление сборкой