Курс Webpack v4

Язык преподавания в курсе – русский. Вскоре будет доступна украинская версия этого курса.

Видеозаписи лекций без обратной связи и участия преподавателя. Вы получите доступ к материалам сразу после оплаты.

О курсе

Продвинутый и ёмкий курс

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

С самых азов

Мы подразумеваем, что вы не знакомы с Webpack, но хотите освоить его и другие технологии, используемые в продакшене на современных проектах.

В комфортном темпе

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

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

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