Курс Webpack v4

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

Відеозаписи лекцій без зворотного зв’язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.

Про курс

Просунутий і ємний курс

Ви вивчите всі можливі теми, які відносяться до Webpack: від основ ефективного складання проєкту до просунутих підходів на кшталт code splitting і shimming.

Із самих азів

Ми маємо на увазі, що ви не знайомі з Webpack, але хочете освоїти його та інші технології, які використовуються в продакшені на сучасних проєктах.

У комфортному темпі

Ми надамо вам весь матеріал за курсом, щоб ви у своєму ритмі займалися вивченням Webpack.

Структура курсу

1. Знайомство з webpack

– Що таке webpack?
– Bundler vs task runner
– Відмінності webpack від інших рішень
– Dependency graph
– Найпростіший запуск webpack: config-free, CLI
– Розроблення найпростішої конфігурації webpack
– Типи конфігурацій: Об’єкт, Функція, Проміс
– Підключення HTML

2. основи webpack- Основи webpack

– Запуск webpack через Node API
– Що таке Loader
– Що таке Plugin
– Налаштування сервера для розробки
– webpack-dev-server
– webpack-dev-middleware
– Hot module replacement

3. Завантаження коду

– Збірка JavaScript
– Чистий JavaScript
– Транспайлінг
– Збірка React
– Композиція конфігурації: поділ конфігурацій на development і production
– Збірка CSS
– CSS Modules
– Завантаження PostCSS

4. Завантаження ассетів

– Покращена композиція конфігурації
– Переклад конфігурації на ESM
– Винесення частин конфігурації в модулі
– Source maps
– Завантаження зображень
– Завантаження лодером
– Завантаження інлайн
– Завантаження SVG: React-компонент, атрибут src, CSS
– Завантаження шрифтів
– Завантаження лодером
– Завантаження Google-шрифтів

5. Оптимізація збірки- Розбір webpack runtime- Змінні оточення- Аналіз збірки

– Розбір webpack runtime
– Змінні оточення і feature flags
– Аналіз збірки
– Оптимізація режимів збірки: development, production
– JavaScript
– Мініфікація
– Tree shaking
– Scope hoisting
– Dead code elimination

6. Просунута оптимізація

– CSS
– Відокремлення CSS від збірки
– autoprefixer
– Мініфікація
– Оптимізація зображень
– Деплоймент збірки
– Long term caching

7. У довгу подорож

– Що таке чанк, модуль, залежність
– Code splitting
– Bundle Splitting
– Manifest management
– Polyfilling
– gzip-компресія збірки
– Налаштування publicPath
– Просунуте налагодження збірки

8. Копаємо ще глибше

– Проблеми, пов’язані з code splitting та їх вирішення
– Code splitting React-додатків
– Shimming
– Глобальне управління збіркою