Шаг 4. Плагин HtmlWebpack и его динамическая настройка

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

Делаем первый шаг по созданию динамики в нашем проекте — задаём дополнительную переменную, от которой с лёгкостью сможем добавлять и убирать новые входные точки (форматов .js и .html).

const fileName = ['index', 'play']

Имена, хранящиеся в нашем массиве, полностью идентичны названиям файлов (два HTML и JS)

Далее нас интересует непосредственно сам конфиг, где хранятся и вызываются плагины, а именно HtmlWebpackPlugin. Чтобы мы могли гибко настраивать этот плагин (и для работы остальных) нам потребуется следующая логика:

  plugins: [].concat(
  fileName.map(
    (file) =>
      new HtmlWebpackPlugin({
        inject: 'head',
        template: `./${file}.html`,
        filename: `./${file}.html`,
      }),
  ),
).filter(Boolean) 

Так как поле plugins принимает только массивы, мы даём ему пустой массив. Далее используем метод concat, объединяющий переданные ему параметры — в нашем случае дополнительные плагины мы будем добавлять именно туда. В конце вызываем метод filter для очистки любых пустых значений.

Вспомним про нашу переменную fileName и используем её в связке с HtmlWebpackPlugin. Применим к переменной метод map и передадим в качестве параметра файл (file), который мы как раз используем для подключения шаблона (template) HTML-файлов. Теперь при подключении filename сохранит имена файлов в исходном виде.

Резюмируем. Используя знакомые нам методы, мы на основе массива имён настроили подключение файлов в нужном формате. Чтобы убрать или добавить HTML-файл, нам нужно лишь обновить массив с именами для файлов.