Автор: HTML Academy
Название: Webpack (2023)
Описание:
Для фронтендеров, которые хотят освоить Webpack — один из инструментов, упрощающих разработку.
Webpack помогает повысить производительность приложения, оптимизировать код и сократить время на разработку, сборку и тестирование проекта.
Программа курса:
Раздел 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 (2023)
Описание:
Для фронтендеров, которые хотят освоить Webpack — один из инструментов, упрощающих разработку.
Webpack помогает повысить производительность приложения, оптимизировать код и сократить время на разработку, сборку и тестирование проекта.
Программа курса:
Раздел 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
Подведение итогов
Вспомним, что мы изучили, подведём итоги и закрепим полученные знания.
— Вспомним основные моменты
— Демо: пример работы динамически настраиваемой сборки под несколько страниц
Практика
— Задание: сборка многостраничного приложения
— Решение: пошаговая эталонная реализация
— Подводим итоги курса
— Итоговый тест по курсу
Cкрытый контент, нужно авторизируйся или присоединяйся.
Возможно, Вас ещё заинтересует:
- [it-black] Виктор Черемных ― Администрирование безопасных сетей (ViPNet) (2025)
- [Diogo Resende] Учебный лагерь по инженерии ИИ - технология поисковой дополненной генерации (RAG) для LLM
- [Павел Старцев] [Stepik] Нейросети: от простейшего запроса до создания бота (2025)
- [Нетология] Профессия «Интернет‑маркетолог с нуля до middle» (2025)
- [Яндекс.Практикум] Python‑разработчик (+Python‑разработчик плюс)
- [Архэ] Компьютерная лингвистика. Основные задачи компьютерной лингвистики и подходы к их решению
- [Екатерина Юсупова] Герпес вирус. Обучающий проект (2024)
- [Stepik] Разработка мобильных и PC приложений на Python. Фреймворк Kivy (2024)
- [Павел Монахов] Системное администрирование Linux (2024)
- [Богдан Кухар] Администратор 1С v 3.8 (все модули) (2024)
- [Stepik] Многозадачность в Python. Многопоточное программирование
- [developedbyed] Фулстек Next.js (React) разработчик
- [brainy] Веб-тестирование для абсолютных новичков (2024)
- [PurpleSchool] Neovim - практика и настройка (2024)
- [Stepik] Java с нуля до Junior + Подготовка к собеседованию (2024)
- [NFE] Внедрение Cisco SD-WAN (Viptela) . Базовый курс (2024)
- [Webщик] Тревожный чемоданчик складчика 3 (2024)
- [Яндекс.Практикум] Python-разработчик. Часть 5 из 8
- [Structy] Алгоритмы и структуры данных для Faang (2024)
- [Laravelcreative] Laravel 9, 10 (база + 4 практических курса)