Для фронтендеров, которые хотят освоить Webpack — один из инструментов, упрощающих разработку. Webpack помогает повысить производительность приложения, оптимизировать код и сократить время на разработку, сборку и тестирование проекта. На курсе рассматривается актуальная версия Webpack 5. Программа курса: Раздел 1 Введение Узнаем, зачем нужен webpack и как его применить в любом проекте. — Что такое webpack — Базовые команды при работе с webpack — файл package.json — Демо: создание простого базового конфига Практика — Задание: сборка тестового проекта — Решение: пошаговая эталонная реализация — Тест по первому разделу Раздел 2 Конфигурационные файлы Рассмотрим форматы конфигурационных файлов webpack. — Формат конфигурационных файлов webpack — Мультистраничные приложения, основные концепции webpack — Начало работы с конфигами дополнительных инструментов — Демо: добавление ESLint и Prettier в готовый проект Практика — Задание: настройка дополнительных зависимостей — Решение: пошаговая эталонная реализация — Тест по второму разделу Раздел 3 Входная точка приложения Начнём рассматривать основные концепции работы с webpack. — Что такое входная точка приложения — Демо: перенос проекта на webpack — Демо: мультистраничное приложение Практика — Задание: настройка мультистраничного приложения — Решение: пошаговая эталонная реализация — Тест по третьему разделу Раздел 4 Выходная точка и сборка приложения Рассмотрим концепцию webpack — output. — Выход из приложения по окончанию разработки. Output — Нововведения webpack v5 — Оптимизация и кодсплиттинг — вендоры — Обработчики — Демо: пример работы asset Практика — Задание: оптимизация проекта — Решение: пошаговая эталонная реализация — Задание: исправление ошибок и оживление проекта — Решение: пошаговая эталонная реализация — Тест по четвёртому разделу Раздел 5 Webpack-плагины Разберём концепцию webpack — плагины. — Что такое плагины и зачем они нужны — Необходимые в разработке плагины — Демо: работа необходимых плагинов, развитие сборки, минимальная кастомизация Практика — Задание: настройка плагинов — Решение: пошаговая эталонная реализация — Задание: создание и поддержка многостраничного приложения — Решение: пошаговая эталонная реализация — Тест по пятому разделу Раздел 6 Режимы разработки Изучим концепцию webpack — моды. — Режим разработки — Production-режим и браузерная поддержка — Исходные карты — Демо: работа webpack в зависимости от режима Практика — Задание: настройка режимов и их оптимизация — Решение: пошаговая эталонная реализация Тест по шестому разделу Раздел 7 Подведение итогов Вспомним, что мы изучили, подведём итоги и закрепим полученные знания. — Вспомним основные моменты — Демо: пример работы динамически настраиваемой сборки под несколько страниц Практика — Задание: сборка многостраничного приложения — Решение: пошаговая эталонная реализация — Подводим итоги курса — Итоговый тест по курсу Бонусный раздел Разберём дополнительные инструменты и поделимся полезными ссылками. Сравнение инструментов для сборки --- Отличия webpack v4 и webpack v5 --- Отличия webpack от других бандлеров --- Актуальный список бандлеров Дополнительные материалы --- NVM --- pnpm --- Кастомизация --- Какой пакетный менеджер лучше --- Проект ASM (awesome) webpack --- Шаблоны (примеры)
