Webpack ПОЛНЫЙ КУРС от А до Я. Вся конфигурация, Микрофронтенд, Монорепозиторий, Module Federation

• Обзор фундаментального курса по VPack.  

• Обсуждение создания монорепозитория с микрофронтендами на основе VPack.  

• Рекомендация посмотреть курс, даже если не работаете с VPack.  

• VPack остается мощным инструментом для продакшена.  

• VPack используется в крупных проектах, таких как Interprise.  

• Понимание VPack поможет в работе с другими сборщиками.  

• Обзор базовой конфигурации VPack.  

• Работа с опциями конфигурации, переменными окружения и сборками.  

• Настройка HAML, работа с плагинами и лоудерами.  

• Настройка TypeScript и работа с регулярными выражениями.  

• Настройка VPack для работы с React и JSX.  

• Работа с CSS и препроцессорами.  

• Декомпозиция VPack-конфликтов и изоляция стилей.  

• Настройка роутинга, ленивых чанков и размера бандла.  

• Работа с алиасами и резолверами модулей.  

• Настройка глобальных переменных и три-шейкинг.  

• Ускорение сборки и настройка ход моде реплейсмент.  

• Настройка favicon и копирование файлов в сборку.  

• Создание плагина для VPack и работа с монорепозиторием.  

• Создание чистого проекта в WebStorm.  

• Инициализация проекта с помощью npm init.  

• Создание директории для исходного кода и файла index.js.  

• Написание и запуск кода для проверки работы.  

• Экспорт функции и импорт в index.js.  

• Установка VPack и VPack CLI.  

• Использование команды npm run build для сборки проекта.  

• Создание файла VPack.config.js для настройки сборки.  

• Настройка точки входа в приложение и использование модуля path.  

• Настройка пути к точке входа в приложение.  

• Использование нескольких точек входа для сборки.  

• Удаление папки сборки и настройка конфигурации сборки.  

• Использование опции clean-tree для очистки папки сборки.  

• Динамическое название бандла для предотвращения кэширования.  

• В настройках конфигурации можно указать шаблоны для названия файлов.  

• Шаблоны включают контент-хэш и другие параметры.  

• При изменении содержимого файла, название файла также меняется.  

• В пакете есть два режима сборки: dev и prod.  

• Dev режим добавляет вспомогательный код, prod режим оптимизирует код.  

• Можно передавать значение режима через переменные окружения.  

• Пак поддерживает передачу переменных окружения.  

• Можно использовать любой формат переменных окружения.  

• Пример передачи режима через скрипт.  

• Для фронтенд-приложений важно обрабатывать HTML-файлы.  

• Необходимо автоматически подставлять скрипты и ссылки на скомпилированные файлы.  

• В пакете есть механизм плагинов для автоматизации сборки.  

• Плагины добавляют дополнительный функционал в пакет.  

• Можно использовать готовые плагины или писать свои.  

• Пример использования плагина для подстановки путей к файлам.  

• Установка плагина как зависимости.  

• Плагин подставляет пути к файлам в HTML-шаблон.  

• Пример использования плагина для создания дефолтного файла.  

• Пак по умолчанию включает плагин для отображения прогресса сборки.  

• Плагин показывает процент выполнения сборки.  

• В продакшне плагин может замедлять сборку.  

• Изменение расширения файлов с .js на .ts.  

• Написание минимального TypeScript кода.  

• Проверка реакции TypeScript на типы аргументов.  

• Проблемы с обработкой TypeScript файлов в Pack.  

• Лоудеры как цепочка обработчиков для файлов с разными расширениями.  

• Порядок лоудеров важен для корректной обработки кода.  

• Пример обработки файлов с помощью лоудеров.  

• Установка TypeScript и TypeScript Loader.  

• Создание TypeScript конфига.  

• Добавление массива лоудеров и резолвера в конфиг.  

• Проверка сборки и корректной обработки TypeScript.  

• Регулярные выражения для обработки файлов с расширением .ts и .tsx.  

• Указание исключений для обработки.  

• Резолвер для обработки расширений файлов с исходным кодом.  

• Установка зависимостей для TypeScript.  

• Замена импортов на обычные импорты.  

• Типизация конфликта для использования автокомплита.  

• Создание отдельного объекта с конфигом для удобства работы.  

• Избавляемся от модуля экспорта и используем дефолтный экспорт.  

• Добавляем две строки в tsconfig.json для правильной обработки импортов.  

• Проверяем тест-конфиг и устанавливаем модуль comonjs.  

• Используем экмо скрипт шесть для импорта и экспорта.  

• Добавляем опцию для тест-нот и устанавливаем моди комон джес.  

• Типизируем переменные окружения, используя юнион-тип.  

• Флажок для работы с пакетами, использующими comonjs.  

• Флажок для дефолтного импорта и экспорта.  

• Объяснение работы с дефолтным импортом и экспортом.  

• Ddf-сервер позволяет автоматически запускать ребилд при изменениях в коде.  

• Рассматриваем три варианта работы с ddf-сервером: простой, конфигурируемый и продвинутый.  

• Выбираем конфигурируемый ddf-сервер и устанавливаем зависимость.  

• Установка DDP и типов для DDP-сервера.  

• Добавление опции DDP в пакет.json.  

• Импорт типа из DDP для корректной работы TypeScript.  

• Указание настроек DDP-сервера в package.json.  

• Запуск DDP-сервера с помощью команды в package.json.  

• Проверка работы DDP-сервера и изменение значений в реальном времени.  

• Передача параметров через переменные окружения.  

• Запуск DDP-сервера на разных портах.  

• Использование разделителя для передачи параметров.  

• Объяснение необходимости source maps.  

• Использование source maps для отслеживания ошибок и стека вызовов.  

• Пример использования source maps в React приложении.  

• Разделение режимов сборки на продакшн и девелопмент.  

• Использование флагов для управления настройками в зависимости от режима.  

• Пример настройки флагов для DDP-сервера.  

• Подведение итогов по настройке конфига и плагинов.  

• Переход к конкретным примерам и установке React.  

• Настройка зависимостей и использование TypeScript.  

• Установка React и ReactDOM как зависимостей.  

• Настройка TypeScript для работы с JSX.  

• Создание компонентов и запуск приложения.  

• Импорт React для успешной сборки.  

• Настройка стилизации компонентов с помощью SCSS.  

• Установка необходимых зависимостей для обработки SCSS.  

• Добавление лоудера для обработки CSS файлов.  

• Важность порядка лоудеров при обработке файлов.  

• Установка и тестирование лоудера для CSS.  

• Установка и настройка SCSS лоудера.  

• Проверка работы SCSS лоудера в сборке.  

• Добавление вложенных селекторов и проверка их работы.  

• Преобразование CSS в JS строки.  

• Использование плагина mini-css-extract-plugin.  

• Настройка плагина для создания отдельных файлов CSS.  

• Создание отдельной папки для конфигурации сборки.  

• Декомпозиция конфигурации на отдельные файлы.  

• Экспорт и использование функций для конфигурации.  

• Копируем все плагины и фильтр булен в функцию.  

• Добавляем недостающие переменные для улучшения читаемости кода.  

• Создаем отдельную функцию для резолверов.  

• Определяем опции для функции сборки.  

• Ожидаем порт и объект с путями до папок.  

• Создаем интерфейс для описания входных полей.  

• Добавляем мод и экспорт.  

• Копируем и вставляем переменные из дэф и прот.  

• Создаем константы для лоудеров и плагинов.  

• Декомпозируем плагины на общие и специфичные для дэф и прод.  

• Возвращаем массив плагинов для улучшения читаемости.  

• Добавляем опции для билд флоудерс и билд резолверс.  

• Деструктуризируем мод, порт и пути.  

• Заменяем пути на те, которые принимаем в опциях.  

• Удаляем лишний импорт и конфигурируем опции.  

• Проверяем работу сборки в разных режимах.  

• Убеждаемся, что все работает корректно.  

• Проблема: модальное окно и выпадающий список имеют одинаковые селекторы, что вызывает конфликты стилей.  

• Решение: методология BEM блок-элемент-модификатор.  

• Недостатки: раздувание названий классов и ухудшение читаемости кода.  

• SASS/SCSS позволяет дублировать классы в разных файлах, что исключает коллизии.  

• Bazel преобразует классы в хэши, что делает их уникальными и нечитаемыми.  

• Для разработки можно использовать читаемые селекторы, а для продакшна — хэши.  

• Импорт классов из SASS файла и их использование в компонентах.  

• Проблемы с TypeScript и их решение через создание файла с декларацией типов.  

• Настройка сборки для корректной работы SASS модулей.  

• Генерация уникальных хэшей для изоляции стилей.  

• Настройка опций для управления названиями классов в зависимости от режима сборки.  

• Примеры использования шаблонов для создания селекторов.  

• Установка и использование библиотеки React Router Dom.  

• Создание роутера и провайдера для навигации по страницам.  

• Особенности разработки одностраничных приложений.  

• Использование корневого компонента для роутинга.  

• Добавление роутов для отдельных страниц.  

• Настройка API History для работы с роутингом.  

• Добавление опции для использования API History.  

• Настройка сборки и запуск приложения.  

• Добавление компонента Outlet для корректного отображения страниц.  

• Создание папки для страниц и компонентов.  

• Экспорт ленивых компонентов с использованием React Lazy.  

• Настройка роутинга для ленивых компонентов.  

• Импорт компонента Suspense для индикации загрузки.  

• Демонстрация работы Suspense и ленивой загрузки.  

• Настройка тротлинга для замедления загрузки.  

• Сборка приложения и анализ размера бандла.  

• Использование инструмента Bundle Analyzer для анализа размера и структуры бандла.  

• Настройка плагина для анализа бандла в продакшене.  

• Установка и настройка плагина Bundle Analyzer.  

• Анализ размера и структуры бандла в продакшене.  

• Возможность добавления флажка для запуска анализатора.  

• Относительные пути могут быть неудобны при вложенных директориях.  

• Алиасы позволяют указывать абсолютные пути и упрощают навигацию.  

• Настройка алиасов включает указание значка и пути к папке src.  

• Добавление алиаса в build.config.js.  

• Исправление опечатки в пути к папке src.  

• Проверка работы алиасов в веб-шторме и TypeScript.  

• Создание папки для изображений и добавление PNG, JPEG и SVG файлов.  

• Импорт изображений в компонент и обработка ошибок TypeScript.  

• Использование лоудера для обработки изображений.  

• Добавление SVG иконки в компонент и обработка ошибок TypeScript.  

• Использование лоудера SVG для создания реакторных компонентов.  

• Настройка лоудера и добавление его в массив.  

• Изменение размеров и цветов SVG иконок через props.  

• Использование плагина для упрощения настройки цветов.  

• Проверка работы плагина и настройка цветов для SVG иконок.  

• Иконка окрасилась, но не изменилась на другой иконке.  

• Тайп скрипт не понимает модуль SVG, поэтому нет автокомплита.  

• Исправление: добавить декларацию для экспорта SVG-иконки.  

• Добавление новых скриптов в пакет JSON: build-mobile и build-desktop.  

• Передача переменных окружения: платформа для мобильных и десктопных сборок.  

• Создание типа для платформы и добавление его в билтопшинс.  

• Импорт и использование плагина define-plugin для подмены глобальных переменных.  

• Передача значений глобальных переменных через билтопшинс.  

• Объявление константы для переменной платформы и перезапуск сборки.  

• Добавление условного кода для мобильных и десктопных сборок.  

• Пакеты для мобильных и десктопных сборок могут быть разными.  

• Три-шейкинг: оптимизация кода, удаление неиспользуемых веток кода.  

• Пакеты могут оптимизировать код, удаляя неиспользуемые функции и ветки.  

• Использование ленивых чанков и грамотная декомпозиция для повышения эффективности.  

• Ссылки на предыдущие ролики для более глубокого понимания оптимизации.  

• Проверка типов может сильно замедлять сборку, особенно в больших проектах.  

• В документации есть флажок "transpile-only", который ускоряет компиляцию, но отключает проверку типов.  

• Можно создать отдельный скрипт для проверки типов и запускать его отдельно.  

• Плагин "fork-ts-checker" выносит проверку типов в отдельный процесс, что ускоряет сборку.  

• Плагин можно добавить в список плагинов и использовать в зависимости от конфигурации.  

• Проверка типов происходит параллельно с сборкой, что улучшает производительность.  

• Hot Module Replacement позволяет обновлять код без перезагрузки страницы.  

• В классическом сценарии достаточно добавить опцию "hot" в значение true.  

• Для работы с фреймворками, такими как React, требуется дополнительная настройка.  

• Плагин "react-fast-refresh" заменяет "react hot loader" и улучшает производительность.  

• Для использования плагина нужно добавить его в список плагинов и настроить в TS Loader.  

• Плагин работает только в режиме разработки и улучшает производительность сборки.  

• Проверка документации для pablo и swc.  

• Запуск проекта и проверка работы без перезагрузки страницы.  

• Демонстрация изменения цвета и текста без перезагрузки страницы.  

• Использование дефолтных инструментов для изменения данных.  

• Демонстрация сохранения состояния счетчика при клике.  

• Преимущества работы без перезагрузки страницы.  

• Добавление иконки в папку public.  

• Настройка пути к иконке в интерфейсе.  

• Демонстрация отображения иконки в сборке.  

• Перемещение переводов и статичных файлов в сборку.  

• Использование копи плагина для перемещения файлов.  

• Настройка плагина и демонстрация работы.  

• Обсуждение современных компиляторов и их преимуществ.  

• Настройка babel для компиляции TypeScript.  

• Установка и настройка babel-loader и babel-core.  

• Обзор пресетов для babel, включая пресет для TypeScript.  

• Установка и добавление пресетов в массив.  

• Демонстрация успешной сборки с использованием пресетов.  

• Успешная сборка в режиме dev сервера.  

• Ошибка при открытии локального холста.  

• Решение: добавить опцию runtime automatic в реактивный пресет.  

• Возможность использования конфиг-файла для настроек пресетов.  

• Создание конфиг-файла в формате JSON.  

• Настройка опций в конфиг-файле для удобства.  

• Настройка пресетов для работы с JSX и новыми функциями.  

• Планы по созданию собственного плагина для понимания работы Babel.  

• Декомпозиция лоудера для удобства кастомизации.  

• Проблема с использованием дата-тестов в продакшн-коде.  

• Плагин для удаления дата-тестов из продакшн-кода.  

• Пример кода и его анализ в AST-дереве.  

• Обзор AST-дерева и его узлов.  

• Установка типов для Babel Core.  

• Написание плагина для работы с AST-деревом.  

• Указание типа плагина как Babel.core.plugin.  

• Обработка узлов AST-дерева для удаления дата-тестов.  

• Тестирование плагина и его интеграция в сборку.  

• Плагин выполняет свою задачу, выпиливая нужную ноду.  

• Плагины можно вынести в отдельный массив и константу.  

• В продакшене плагин добавляется, в деве нет.  

• Переезд на бейбл лоудер, отказ от тс лоудера.  

• Бейбл отвечает за сборку основного исходного кода.  

• Возможность настройки бейбл и других лоудеров.  

• Сурс мэп помогает отлавливать и дебажить ошибки.  

• Разные виды сурсмэпов подходят для разных режимов.  

• Выбор сурсмэпа зависит от потребностей проекта.  

• Сохранение текущего проекта на Гитхабе.  

• Создание нового репозитория и инициализация проекта.  

• Перенос текущего проекта в новый репозиторий.  

• Разделение монолитного приложения на микросервисы.  

• Микросервисы имеют свои зоны ответственности.  

• Переиспользуемые части и общая конфигурация.  

• Использование npm workspaces и npm model federations.  

• npm workspaces для монорепозитория, npm model federations для микросервисов.  

• Возможность построения полноценных микросервисов на основе разобранных основ.  

• Создаем пустой проект и создаем две ключевые папки: сервисы и пакеты.  

• Инициализируем проект с помощью npm init.  

• Убираем лишние файлы и настраиваем рабочие пространства.  

• Создаем три сервиса: админ, шоп и хост.  

• Создаем пакет шейры для переиспользуемого кода.  

• Переносим файлы из старого проекта в новый.  

• Инициализируем npm init в папке шейры.  

• Удаляем ненужные скрипты и зависимости.  

• Переносим зависимости из старого проекта.  

• Создаем тест-конфиг и удаляем ненужные комментарии.  

• Устанавливаем модули из корня монорепозитория.  

• Настраиваем рабочие пространства для использования пакетов.  

• Создаем функцию в пакете шейры и используем её в сервисе хост.  

• Настраиваем зависимости для работы с рабочими пространствами.  

• Импортируем пакет и используем его функции в сервисе.  

• Копируем файлы из старого проекта и удаляем лишнее.  

• Устанавливаем зависимости для реакта и реакт-дом.  

• Переносим скрипты и добавляем их в новый проект.  

• Использование билд-пакета из монорепозитория.  

• Экспорт необходимых функций и типов.  

• Импорт билд-пакета в пак-конфиг.  

• Создание папок и файлов для проекта.  

• Перенос компонентов страницы в новый проект.  

• Запуск проекта и проверка работы.  

• Добавление ссылок на страницы.  

• Удаление ненужных файлов для оптимизации.  

• Проверка работы страниц и ссылок.  

• Разделение админки и магазина на отдельные приложения.  

• Удаление ненужных папок и файлов.  

• Настройка микрофронтов как отдельных приложений.  

• Создание файла бутстрап для ленивого импорта.  

• Настройка экспорта для тейп скрипт залей модиус.  

• Импорт роутера в хост-контейнер.  

• Вынесение роутера в отдельный файл.  

• Экспорт и импорт роутера в админку и магазин.  

• Подготовка роутеров для добавления в хост-контейнер.  

• Настройка модели федерейшн через плагин.  

• Импорт пэк-джисона и настройка опций.  

• Импорт и настройка зависимостей для сервисов.  

• Указываем название микрофронтенда и файла для подключения.  

• Определяем, что предоставлять приложению-контейнеру, в данном случае роутер.  

• Указываем общие библиотеки и их версии.  

• Указываем, какие библиотеки нужно подгрузить сразу.  

• Можно вынести базовые настройки в отдельный файл.  

• Дублирование кода в сервисах допустимо.  

• Изменяем название файла и путь до роутера.  

• Указываем хост-контейнер и его настройки.  

• Используем переменные для динамического определения адресов.  

• Запускаем админку и шоп на разных портах.  

• Корректируем корневой компонент для каждого сервиса.  

• Проверяем, что приложения работают на разных портах.  

• Импортируем роутеры из модулей в хост-контейнер.  

• Перезагружаем хост-контейнер для применения изменений.  

• Проверяем работу роутеров и подгрузку модулей.  

• Добавляем вложенные маршруты для шоп и админ.  

• Исправляем ссылки для корректной подгрузки страниц.  

• Решаем проблему с запросами чанков через неправильный путь.  

• Открываем билд плагинс и добавляем опцию "паблик паз".  

• Перезапускаем все три приложения и проверяем корректность загрузки статики.  

• Обсуждаем необходимость использования монарепа для повторного использования кода.  

• Создаем константы для хранения ссылок на роуты для каждого сервиса.  

• Импортируем константы в сервисы и используем их как обычные константы.  

• Это позволяет автоматически обновлять ссылки во всех сервисах при изменении.  

• Показываем, как использовать константы для ссылок на страницы.  

• Проверяем корректность работы ссылок и их автоматическое обновление.  

• Обсуждаем, как можно использовать константы для переиспользуемых хелперов и утилит.  

• Создаем переиспользуемые компоненты, такие как карточка пользователя и модальное окно с оплатой.  

• Импортируем компоненты в сервисы и используем их в компонентах и хелперах.  

• Пример использования компонента в сервисах магазина и админки.  

• Общие компоненты хранятся в шейр коде, а специфичный код для конкретных сервисов находится на уровне самих сервисов.  

• Это позволяет эффективно управлять кодом и поддерживать его в актуальном состоянии.  

• Создаем базовый тест-конфиг для всех сервисов.  

• Удаляем дублирование кода и настраиваем алиасы.  

• Специфичные для сервиса настройки оставляем в каждом тест-конфиге.  

• Сборка, конфиги и тесты вынесены отдельно.  

• Возможность переиспользования конфигураций между сервисами.  

• Изоляция сервисов позволяет тестировать их по отдельности.  

• Возможность создания генератора кода для автоматического развертывания сервисов.  

• Гибкая настройка сервисов через входные параметры.  

• Хост-контейнер объединяет все сервисы, но не содержит сложной бизнес-логики.  

• Запуск команд из корня монорепозитория.  

• Использование команды npm run start для запуска скриптов.  

• Возможность параллельного выполнения скриптов через concurren.  

• Отправка кода на GitHub и инициализация проекта.  

• Призыв к поддержке канала через лайки и комментарии.  

• Анонс курса повышения квалификации с углубленным изучением различных аспектов разработки.