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

[Виктор Неизвестный]

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

О курсе

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

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

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

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

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

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

Подробнее:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.