Шаг 1. Добавление зависимостей

Нам нужно добавить динамичности в конфиг. Что понимается под динамичностью в этом демо и в целом в JS?

Динамичность — когда мы без особых усилий, используя вспомогательные инструменты, можем создавать HTML-элементы или, как в нашем случае, добавлять поддержку большого количества файлов формата HTML и JS для создания многостраничного приложения.

Перед нами «лежат» два HTML- и JS-файла, с которыми мы работаем. И нам нужно сделать так, чтобы webpack понимал, к какому HTML-файлу относится функциональность. То есть на одной странице у нас должна быть рабочая кнопка, считающая клики по ней — и ничего более. А на другой странице этой кнопки быть не должно, но при нажатии клавиш клавиатуры считается их общее нажатое количество.

Как и говорилось ранее, для корректной работы и отображения изменений в HTML-файлах нам нужно добавить html-loader. Для этого открываем файл webpack.config.js, находим поле module > rules и добавляем html-loader, как это было показано ранее в демо:

{
  test: /\.(html)$/i,
  use: "html-loader"
}