Программирование Продвинутый курс по Webpack v4, с чистого листа [Lectrum]

[Stokrat]

Продвинутый и ёмкий курс
Вы изучите все возможные темы, которые относятся к Webpack: от основ эффективной сборки проекта до продвинутых подходов типа code splitting и shimming.

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

1. Знакомство с webpack

1. Что такое webpack?
2. Bundler vs task runner
3. Отличия webpack от остальных решений
4. Dependency graph
5. Самый простой запуск webpack: config-free, CLI
6. Разработка самой простой конфигурации webpack
7. Типы конфигураций: Объект, Функция, Промис
8. Подключение HTML

2. Основы webpack

1. Запуск webpack через Node API
2. Что такое Loader
3. Что такое Plugin
4. Настройка сервера для разработки
5. webpack-dev-server
6. webpack-dev-middleware
7. Hot module replacement

3. Загрузка кода

1. Сборка JavaScript
2. Чистый JavaScript
3. Транспайлинг
4. Сборка React
5. Композиция конфигурации: разделение конфигураций на development и production
6. Сборка CSS
7. CSS Modules
8. Загрузка PostCSS

4. Загрузка ассетов

1. Улучшенная композиция конфигурации
2. Перевод конфигурации на ESM
3. Вынесение частей конфигурации в модули
4. Source maps
5. Загрузка изображений
6. Загрузка лодером
7. Загрузка инлайн
8. Загрузка SVG: React-компонент, атрибут src, CSS
9. Загрузка шрифтов
10. Загрузка лодером
11. Загрузка Google-шрифтов

5. Оптимизация сборки

1. Разбор webpack runtime
2. Переменные окружения и feature flags
3. Анализ сборки
4. Оптимизация режимов сборки: development, production
5. JavaScript
6. Минификация
7. Tree shaking
8. Scope hoisting
9. Dead code elimination

6. Продвинутая оптимизация

1. CSS
2. Отделение CSS от сборки
3. autoprefixer
4. Минификация
5. Оптимизация изображений
6. Деплоймент сборки
7. Long term caching

7. В долгое путешествие

1. Что такое чанк, модуль, зависимость
2. Code splitting
3. Bundle Splitting
4. Manifest management
5. Polyfilling
6. gzip-компрессия сборки
7. Настройка publicPath
8. Продвинутая отладка сборки

8. Копаем ещё глубже

1. Проблемы, связанные с code splitting и их решение
2. Code splitting React-приложений
3. Shimming

Скачать

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