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

В этом ролике мы реализуем полную конфигурацию Webpack. Настроим typescript, react, babel. Научимся работать со стилями и css modules. Рассмотрим большую часть возможностей webpack 5. Реализуем монорепозиторий с микрофронтендом на основе workspaces и Module federation.

Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend

Весь исходный код из ролика здесь - https://t.me/ulbi_tv/182

Полезные ссылки из видео:
Деплой фронтенд -    • Деплой Frontend приложения. Настройка...  
Создаем свой ЯП -    • Создаем свой ЯЗЫК ПРОГРАММИРОВАНИЯ. Л...  
Esbuild -    • ESBuild полный курс от А до Я. Замена...  
Оптимизация frontend -    • БЫСТРЫЙ FRONTEND. Оптимизация. Как пи...  
Фундаментальный React -    • React JS фундаментальный курс от А до Я  
Архитектура frontend приложений -    • Архитектура современных FRONTEND прил...  


Таймкоды:
00:00 ➝ Введение. План на урок
04:53 ➝ Практика. Базовая конфигурация вебпак. Инициализируем проект.
08:14 ➝ Создаем webpack.config.js. Entry и output. Кеширование файлов. Динамический filename.
14:12 ➝ Переменные окружения (env variables).
16:06 ➝ HtmlWebpackPlugin. Концепция плагинов.
20:40 ➝ ProgressPlugin
21:28 ➝ Концепция лоадеров (loaders). Настраиваем Typescript
27:52 ➝ Меняем язык конфигурационного файла на TypeScript
33:42 ➝ Настраиваем Dev Server. Watch Режим. Что такое source maps?
43:42 ➝ React. JSX
47:35 ➝ Работа со стилями. css и scss
53:00 ➝ MiniCssExtractPlugin
56:30 ➝ Декомпозируем конфиг. Улучшаем читаемость и подготавливаем к переиспользованию
01:09:00 ➝ Изоляция стилей. Css modules
01:19:42 ➝ Роутинг. Ленивые чанки. Code splitting. Размер бандла. Bundle analyzer. History Api Fallback.
01:34:25 ➝ Алиасы. Резолвинг модулей. Абсолютные импорты
01:37:40 ➝ Ассеты. Работа с картинками, шрифтами, иконками.
01:49:17 ➝ Глобальные переменные сборки. Tree shaking
01:58:15 ➝ Проверка типов в отдельном процессе. ForkTsCheckerPlugin
02:04:40 ➝ Hot module replacement (hmr)
02:10:56 ➝ Favicon. CopyPlugin
02:15:09 ➝ Настраиваем Babel. Babel-loader. Современные компиляторы. Swc и esbuild.
02:23:00 ➝ Создаем свой babel плагин
02:34:25 ➝ Source map на примере ошибки
02:37:50 ➝ Настраиваем монорепозиторий. Теория про микрофронтенд. npm workspaces.
03:00:00 ➝ Настраиваем микросервисы. Webpack module federation
03:19:50 ➝ Shared код из packages
03:25:40 ➝ Выносим общий tsconfig. Переиспользуем код в сервисах.
03:32:30 ➝ Всем спасибо за просмотр! Рассчитываю на вашу поддержку друзья в виде лайков и комментариев, всем спасибо :)



Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - https://boosty.to/ulbitv