Основные концепции и возможности Webpack

Введение

• Тема: Основные концепции и возможности Webpack
• Основное: Как создать свой монорепозиторий на основе Module Federation
• Ценность: Полезно даже тем, кто не работает с Webpack
• История: Предыдущий курс по Angular устарел и будет перезаписан.

---

Важность Webpack

• Почему вебпак: 26 миллионов скачиваний в неделю
• Современные альтернативы: Но Webpack всё ещё актуален в энтерпрайз-разработке
• Легендарный инструмент: Перевернул многое в веб-разработке
• Совместимость: Разобравшись с Webpack, легче работать с другими сборщиками

---

План курса

1. Базовая конфигурация
2. Теория и практические примеры
3. Опции конфигурации
4. Переменные окружения
5. Production и Development сборка
6. Подключение HTML и скриптов
7. Плагины, Loaders, Typescript и регулярные выражения
8. Декомпозиция конфигурации
9. Работа с dev server и режим watch
10. Source Maps
11. Настройка React JSX
12. Работа со стилями CSS, пре-процессорами SCSS
13. Декомпозиция конфигурации
14. Реализация роутинга
15. Акизизация ленивых чанков
16. Размер бандла и код-сплитинг
17. Module Federation
18. Работа с ассетами: изображениями, шрифтами, иконками
19. Концепция tree-shaking
20. Оптимизация сборки и HMR
21. Копирование файлов и фавиконка
22. Создание собственного плагина
23. Детальное использование Source Map
24. Настройка монорепозитория на основе Module Federation

---

Начало работы с Webpack

1. Инициализация проекта: Node.js и npm
2. Создание первоначального кода: Hello World в index.js
3. Первичная сборка с Webpack: Установка Webpack и Webpack CLI
4. Минимальная конфигурация: Создание webpack.config.js
5. Точка входа: entry: './src/index.js'
6. Точка выхода: output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }

---

Плагины и Loaders

• HTML Webpack Plugin: автоматическое обновление HTML файла
• Progress Plugin: отображение прогресса сборки
• Typescript Loader: конфигурация TypeScript
• CSS/SCSS Loaders: подгрузка стилей
• Mini CSS Extract Plugin: извлечение CSS в отдельные файлы
• Source Maps: удобство отладки

---

Продвинутая настройка

• DevServer: автоматическое обновление при изменениях
• Hot Module Replacement: обновление модулей без перезагрузки страницы
• Code Splitting: деление кода на чанки
• Bundle Analyzer: анализ размера бандла
• Роутинг: настройка клиентского роутинга с React Router Dom
• CSS Modules: изоляция стилей
• Tree Shaking: удаление неиспользуемого кода

---

Монорепозиторий и Module Federation

• Создание монорепозитория: Структура директорий
  • packages/shared: Общий код
  • packages/build-config: Конфигурация сборки
  • services/host: Хост приложение
  • services/admin: Админка
  • services/shop: Магазин
• Настройка workspace в npm
• Настройка Webpack Module Federation:
  • Хост приложение
  • Дочерние приложения (admin и shop)

---

Примеры использования

1. Импорт модулей:
2. Конфигурация Module Federation:
3. Интеграция админки и магазина:
4. Общий роутинг:
5. Автоматическая сборка и запуск всех сервисов:
6. Setup HMR: Hot Module Replacement
7. Запуск и отладка: Просмотр Network запросов, логи, ошибки
8. Tree Shaking: Удаление неиспользуемого кода

---

Заключение

• Возможности Webpack и его важность
• Пример создания масштабируемого монорепозитория
• Переиспользование конфигураци Создание собственных плагинов