Шаг 4. HtmlWebpackPlugin и его настройка

Посмотрим, как настроить плагин без использования встроенных методов массивов.

Открываем файл webpack.base.js, где находится общая логика всего приложения, и переходим к полю plugins. Здесь для раздельных HTML-файлов мы будем дублировать вызов инстанса класса HtmlWebpackPlugin. Давайте разберём наглядно.

Подключаем сам плагин:

const HtmlWebpackPlugin = require('html-webpack-plugin');

Далее для нескольких HTML-файлов плагин будет выглядеть так:

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

Обратите внимание на несколько аспектов.

• В пути к HTML-файлу отсутствует директория src. Это не ошибка и не новый синтаксис. Так случатся, если указывать поле context: path.resolve(__dirname, '../src').

• В поле chunksуказывается имя отдельного JS-файла. Дело в том, что иметь один на две страницы — плохая практика, которая приводит к конфликтам при разработке.