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

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

Полезные ссылки из видео:

Таймкоды:
00:00 ➝ Введение. План на урок
04:53 ➝ Практика. Базовая конфигурация вебпак. Инициализируем проект.
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 ➝ Всем спасибо за просмотр! Рассчитываю на вашу поддержку друзья в виде лайков и комментариев, всем спасибо :)

Поддержать меня и мой канал вы можете по ссылкам ниже.

[Андрей-нык]

Тимур дает бесплатно концентрированную информацию, при этом охватывает дополнительный стек сопутствующих технологий, огромный респект.

[bayko]

Удивительно, насколько же ты чувствуешь, чего хотят твои зрители и какого материала не хватет на ютубе для начинающих и не только. Многие ютуберы-программисты снимают что-то вроде - "как пользоваться методом map" а видео длится час. В твоих же видео за коротких срок, можно, практически, полностью осваивать технологии. Благодарю за это!

[pavelsmirnov]

Большое спасибо, Тимур. Столько полезной инфы от опытного разраба, да еще и бесплатно. Просто лучший!

[Abylai]

Отличный курс для начинающих front end разработчиков. Долго искал на ютубе курс с качественным подачей материала, не пожалел что повторяя за тобой от создание файлов и папок до написание кода для конфигурации webpack, localhost и т.д. Блягодаря этому видео у меня появилось хорошее структуры работы с webpackom. Спасибо

[GioMikadzegio]

как ты черт возьми это делаешь ?!)))
ты номер 1 бро !! мечтаю стать таким как ты !!!
спасибо тебе !!

сейчас прохожу курс '"продвинутый frontEnd " у Тимура, это просто путешествие в код )))

[Ya_Mayka]

Просыпаюсь утром, а я оказывается уроки смотрю

[stil]

О такой красоте я и мечтать не мог, спасибо!!! 🎉

[grigorytrokhinin]

как раз собирался копать module federation, а тут твой фундаментальный ролик - спасибо огромное!❤

[mr.marten]

Осталось пару вопросов:
1) Касательно json файлов в public/locales, как их лучше собирать/загружать на деве?
2) HMR видимо не работает при MFE, но в целом это и не нужно при таком сильном разделении, но все же вопрос, это можно реализовать?
3) Касательно production сборки, данная конфигурация является достаточной для продакшена или есть еще какие-то рекомендации?

Очень хорошее видео, поверхностно много интересных и значимых моментов для новичков и продвинутых, в некоторых местах даже очень глубоко зашли (AST дерево), надеюсь будет вторая часть - типа advanced, где будет подробнее про поведение в runtime, оптимизация dev/prod, работа с разными плагинами и/или написание своего для webpack, такого контента, к сожалению, практически нет

Спасибо

[DmitryKorovin-rrhl]

это фундаментальный труд, просто респектище

[pink-doublethink]

Спасибо за полезный урок о Webpack. Очень понравилось, как автор подробно изложил тему и представил ее в своей программе. *Буду рекомендовать друзьям!*

[Анатолий-твз]

Вот это уровень. Лучше чем во многих курсах. Спасибо!

[beptojietik]

Комментарий для продвижения канала. Просто нет слов, кто еще может бесплатно вываливать такой огромный концентрат качественного контента? Вопрос риторический)

[gritsienkooleg]

Спасибо огромное, очень нужно, полезно, интересно, крутая подача! Будь здоров и счастлив🎉

[skyguy]

Большое спасибо за полезный и доступный (бесплатный) курс!!

[ИванПискунов-ьх]

Это лучшее и понятное объяснение как настроить webpack, Спасибо огромное за это видео! Ещё хотелось бы попросить обзор по vite, не такой конечно огромный и подробный, но с базовой настройкой под ts. Ещё раз спасибо! Это золото.

[Bombilaz]

Устроился недавно на работу с микрофронтами, и тут ты выпускаешь видео, спасибо огромное)

[lex]

Огромное СПАСИБО!
Обычно смотрю ютуб на перемотке, а ваши учебные ролики смотрю на замедленной скорости. 👍

[ПётрПетров-дчх]

Даж пофиг что там за контент. Когда видишь 3, 5 часа - это мощно.

[yuridozhdikov]

Тимур ты просто супер! Мне как раз нужно проект переводить на микрофронт и ты выпускаешь этот видос! Храни тебя JS)