1.2. Что будет на курсе
На этом курсе вы научитесь работать с webpack — статическим сборщиком модулей, который позволяет собрать множество файлов в один. Вы узнаете, как добавить сборщик и настраивать его поля, познакомитесь с разными режимами разработки, а ещё научитесь выбирать плагины и обработчики для вашего проекта.
После курса вы сможете:
- работать с пакетным менеджером npm из терминала;
- менять конфигурации webpack;
- конфигурировать дополнительные зависимости Babel и ESLint;
- понимать, как работают зависимости, выбирать и подключать их;
- писать собственные сборки с нуля.
Программа
«Введение». Разберём, зачем нужен webpack и изучим базовые команды для работы с ним. Начнём практиковаться — соберём тестовый проект и проверим его работоспособность.
«Конфигурационные файлы». Поговорим о форматах конфигурационных файлов и начнём работать с конфигами. Добавим в проект готовые зависимости: Babel, ESLint и Prettier.
«Входная точка приложения». Рассмотрим одну из основных концепций webpack — enter, узнаем, что это и для чего используется. Попрактикуемся добавлять в готовый проект дополнительные зависимости и создавать несколько точек входа.
«Выходная точка и сборка приложения». Поговорим об ещё одной концепции — output, разберём код-сплиттинг и обработчики. Также научимся оптимизировать проекты, сжимая картинки и шрифты.
«Webpack-плагины». Разберём, что такое плагины и чем они отличаются от загрузчиков. Добавим и настроим плагины для проекта: MiniCssExtractPlugin и HtmlWebpackPlugin.
«Режимы разработки». Поговорим о модах — режимах разработки development, production и none. Узнаем, как работает webpack в разных режимах, а также научимся настраивать и оптимизировать режимы.
«Подведение итогов». Вспомним всё, чему мы научились, и закрепим знания — соберём проект с использованием webpack без потери данных на страницах.
После курса вы сможете создавать собственные сборки и менять конфиги в рабочих проектах, не боясь при этом что-то сломать. Вы станете тратить меньше времени на разработку, потому что webpack снимет с вас часть рутинных задач. А ваши приложения станут быстрее, ведь вы научитесь оптимизировать код и сжимать размер файлов или шрифтов перед деплоем проекта.
Если вы обнаружили ошибку или неработающую ссылку, выделите ее и нажмите Ctrl + Enter