програма курсу:
Розділ 1
введення
Дізнаємося, навіщо потрібен webpack і як його застосувати в будь-якому проекті.
Практика
- Тест по першому розділу
Розділ 2
конфігураційні файли
Розглянемо формати конфігураційних файлів webpack.
РОЗДІЛ 3
вхідна точка додатка
Почнемо розглядати основні концепції роботи з webpack.
Розділ 4
вихідна точка та збірка програми
Розглянемо концепцію webpack-output.
Практика
Розділ 5
Webpack-плагіни
Розберемо концепцію webpack-плагіни.
Розділ 6
режими розробки
Вивчимо концепцію webpack-моди.
Практика
Тест по шостому розділу
Розділ 7
Підведення підсумків
Згадаймо, що ми вивчили, підведемо підсумки і закріпимо отримані знання.
Практика
- Підбиваємо підсумки курсу
- Підсумковий тест по курсу
Розділ 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
Підведення підсумків
Згадаймо, що ми вивчили, підведемо підсумки і закріпимо отримані знання.
- Згадаймо основні моменти
- Демо: приклад роботи динамічно настроюється збірки під кілька сторінок
Практика
- Завдання: збірка багатосторінкового додатка
- Рішення: покрокова еталонна реалізація
- Підбиваємо підсумки курсу
- Підсумковий тест по курсу
https://privatelink.de/?https://levelup.htmlacademy.ru/webpack