Шаг 3. Обработка нескольких HTML в разных директориях

Теперь обработаем HTML-файлы:

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

Так же, как и с JS-файлами, в поле entry мы обрабатываем HTML-файлы. После этого мы можем собрать проект, где у каждой страницы будут свои скрипты и стили.

Если файл со стилями имеет одинаковое со входной точной (либо HTML) название, при подключении стилей нужно обязательно указывать расширения. Иначе стилей попросту не будет.

Код готового конфига лежит здесь.