В этом ролике мы реализуем полную конфигурацию Webpack. Настроим typescript, react, babel. Научимся работать со стилями и css modules. Рассмотрим большую часть возможностей webpack 5. Реализуем монорепозиторий с микрофронтендом на основе workspaces и Module federation.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Весь исходный код из ролика здесь - t.me/ulbi_tv/182
Полезные ссылки из видео:
Деплой фронтенд - • Деплой Frontend прилож...
Создаем свой ЯП - • Создаем свой ЯЗЫК ПРОГ...
Esbuild - • ESBuild полный курс от...
Оптимизация frontend - • БЫСТРЫЙ FRONTEND. Опти...
Фундаментальный React - • React JS фундаментальн...
Архитектура 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 (доступ к бонусам) - boosty.to/ulbitv
9 июн 2024
