ESBuild полный курс от А до Я. Замена Webpack 5?

Опубликовано: 10 Октябрь 2024
на канале: Ulbi TV

64,937

В этом ролике мы рассмотрим сборщик (бандлер) для frontend проектов ESBuild. Сравним его с Webpack 5. Разберем основные понятия loader, plugin, dev server, bundle, typescript, css, source map, minify и тд. Esbuild vs webpack. Webpack 5.

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

Patreon/boosty (доступ к бонусам) - https://boosty.to/ulbitv

Исходный код тут (github) - https://t.me/ulbi_tv/90
tsconfig - https://gist.github.com/utimur/0e47c8...

Доп. материалы:
Node js от А до Я -    • Node JS фундаментальный курс от А до ...
Real time client-server -    • Real Time КЛИЕНТ-СЕРВЕР на JavaScript...
Backend для начинающих (express) -    • Backend для начинающих на node.js exp...

Таймкоды:
00:00 ➝ Введение и теория. Сравнение webpack и esbuild
06:00 ➝ Начало разработки. Установка, создание конфига. Основы. bundle, outdir.
09:40 ➝ Tree shaking
10:50 ➝ Минимизация бандла
11:30 ➝ Создание конфигурационного файла
14:20 ➝ Переменные окружения, production | development. Cross-env
17:00 ➝ Добавляем React и React-dom
19:45 ➝ Работа со стилями. CSS
21:40 ➝ Sourcemap. Карты исходного кода
23:50 ➝ Настраиваем дефолтный dev (serve) server
28:00 ➝ Production сборка
28:50 ➝ Подключаем TypeScript. Tsconfig.json
32:35 ➝ Переписываем конфиг на TS
36:05 ➝ Настраиваем loader для внешних файлов (png, svg, jpg ..)
38:20 ➝ Динамическое названия бандла. Боремся с кешированием
39:40 ➝ Создаем первый плагин. CleanPlugin. Работаем с файловой системой
44:30 ➝ Cоздаем свой dev-server. Express server. Watch mode. Раздача статики
48:35 ➝ Создаем второй плагин. HtmlPlugin
01:02:20 ➝ Hot reload. Event source. Server sent events
01:09:99 ➝ Итоги. Время ставить лайки и писать комменты :)

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

Patreon/boosty (доступ к бонусам) - https://boosty.to/ulbitv

Qiwi кошелек - http://qiwi.com/n/BODYE821
Яндекс деньги - https://yoomoney.ru/to/4100116193037469