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
Watch video Webpack ПОЛНЫЙ КУРС от А до Я. Вся конфигурация, Микрофронтенд, Монорепозиторий, Module Federation online without registration, duration hours minute second in high quality. This video was added by user Ulbi TV 13 November 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 138,86 once and liked it 5.2 thousand people.