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