Программа

1. Введение

Узнаем, зачем нужен webpack и как его применить в любом проекте.
Как лучше всего проходить этот модуль?
  1. В первом разделе вас ждут вводные статьи, пошаговая демонстрация и практическое задание по сборке тестового проекта. Изучайте материалы по порядку, указанному в программе.

Каждую статью и демо можно оценить, поставив звёздочки и рассказав в комментарии, что понравилось, а что можно добавить — это поможет нам сделать материалы ещё лучше.

  1. Посмотрите пошаговую демонстрацию решения простой типовой задачи — это поможет понять, как теория применяется на практике.

    Мы подготовили несколько проектов для курса. На примере «Счётчик» мы пошагово рассмотрим, как собирается и оптимизируется расширяемое приложение. А с помощью «Зоркий», «Велики» и «Шахматы» разберём перенос проектов на webpack с использованием разных инструментов.

  2. Самостоятельные задания помогут закрепить полученные знания. Вы можете выполнять каждое задание локально — в материалах к нему вы найдёте ссылки на необходимые исходники. Когда выполните задачу, сверьте своё решение с реализацией, предложенной авторами. Чтобы эталонное решение стало доступно в программе раздела, нужно нажать на кнопку «Задание готово».

Мы не рекомендуем вам смотреть эталонную реализацию до того, как вы сами сделаете задание. Практика — это важная часть обучения, вы делаете задание для себя, чтобы наработать навык.

  1. В конце раздела вас ждёт тест — он поможет ещё раз закрепить полученные знания и проверить себя.

  2. Обсудить материалы курса, поделиться своим опытом и задать вопросы по теме можно в чате Discord.

1.1. Что такое webpack Что такое webpack и зачем он нужен.
Прочитайте статьи
1.2. Что будет на курсе Обозначим рамки курса.
1.3. Базовые команды при работе с webpack — файл package.json Команды для инициализации любого проекта.
Посмотрите демонстрацию
1.4. Демо: создание простого базового конфига Пошаговая демонстрация использования базовых команд.
Практика
Выполните практическое задание
1.5. Задание: сборка тестового проекта Задание для самостоятельной практики.
Посмотрите демонстрацию
1.6. Решение: сборка тестового проекта Эталонное решение задания.
Проверка знаний
Пройдите тест
1.7. Тест по разделу
Что дальше?
В первом разделе вы изучили основные команды для работы с webpack из терминала. Вы сами проинициализировали директорию и конфиг, собрали и запустили тестовое приложение. Дальше вы узнаете, как настраивать конфигурационные файлы и добавлять зависимости, оптимизировать код под разные режимы. Не теряйте времени, приступайте к следующему разделу прямо сейчас!

2. Конфигурационные файлы

Разберём форматы конфигурационных файлов webpack.

3. Входная точка приложения

Начнём изучать основные концепции работы с webpack.

4. Выходная точка и сборка приложения

Узнаем о концепции webpack — output.

5. Webpack-плагины

Разберём концепцию webpack — плагины.

6. Режимы разработки

Изучим концепцию webpack — моды.

7. Подведение итогов

Вспомним, что мы изучили, подведём итоги и закрепим полученные знания.

8. Бонусный раздел

Разберём дополнительные инструменты и поделимся полезными ссылками.