Guest
В этом ролике мы реализуем полную конфигурацию Webpack. Настроим typescript, react, babel. Научимся работать со стилями и css modules. Рассмотрим большую часть возможностей webpack 5. Реализуем монорепозиторий с микрофронтендом на основе workspaces и Module federation. Мой курс “Продвинутый Frontend. В production на React“ - Весь исходный код из ролика здесь - Полезные ссылки из видео: Деплой фронтенд - Создаем свой ЯП - Esbuild - Оптимизация frontend - Фундаментальный React - Архитектура frontend приложений - Таймкоды: 00:00 ➝ Введение. План на урок 04:53 ➝ Практика. Базовая конфигурация вебпак. Инициализируем проект. 08:14 ➝ Создаем . 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 (доступ к бонусам) -
