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

[Moderator]

Автор: Lectrum

Название: Продвинутый курс по Webpack v4, с чистого листа (2020)

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

С самых азов
Мы подразумеваем, что вы не знакомы с Webpack, но хотите освоить его и другие технологии, используемые в продакшене на современных проектах. Для облегчения обучения доступно техническое skype-собеседование, которое выявит пробелы в знаниях и поможет их закрыть.

В комфортном темпе
Мы предоставим вам весь материал по курсу, чтобы вы в своём ритме занимались изучением Webpack. Доступна ежедневная менторская поддержка в чате курса.

С сильной менторской поддержкой
Закрытое комьюнити выпускников в Slack, персональный ментор на время обучения, проверка домашних заданий и даже индивидуальные занятия с автором курса — поддержки вы получите ровно столько, сколько вам нужно.

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

 

Подробнее:

Ссылки и информация для скачивания: