🎨 Вёрстка сайтов [HTML Academy] Webpack (2022)

[Ho Lee Fuk]

Автор: HTML Academy

Название: Webpack (2022)

Описание:

Программа курса:

Раздел 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

Подведение итогов

Вспомним, что мы изучили, подведём итоги и закрепим полученные знания.

— Вспомним основные моменты

— Демо: пример работы динамически настраиваемой сборки под несколько страниц

‍

Практика

— Задание: сборка многостраничного приложения

— Решение: пошаговая эталонная реализация

‍

— Подводим итоги курса

‍

— Итоговый тест по курсу

Подробнее:

Скачать:

🔒

Доступ ограничен

Авторизуйтесь, чтобы увидеть цену и получить доступ к материалам

Вход Регистрация