Как настроить множество точек входа (html) в webpack?

Question

[Денис Букреев]

Делаю предварительную верстку страниц проекта.
Для написания HTML использую PUG и HtmlWebpackPlugin.
И сейчас у меня вот такая пелена кода:

Смотреть

new HtmlWebpackPlugin({
      hash: true,
      filename: 'index.html',
      template: './src/html/pages/index.pug'
    }),
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'trainings.html',
      template: './src/html/pages/trainings.pug'
    }),
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'trainings-empty.html',
      template: './src/html/pages/trainings-empty.pug'
    }),
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'new-training-settings.html',
      template: './src/html/pages/new-training-settings.pug'
    }),
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'new-training-lessons.html',
      template: './src/html/pages/new-training-lessons.pug'
    }),

При этом каждый раз приходится перезагружать проект, когда добавляешь новую страницу.
Хотелось бы настроить один раз, например:

new HtmlWebpackPlugin({
      hash: true,
      filename: '[name].html',
      template: './src/html/pages/*.pug'
}),

Но это не работает

Answer 1

[alvvi]

Читайте файлы/директории и генерируйте инстансы в цикле.
Или используйте те же глобы для генерации.

(с глобами, код не мой, но суть та же)

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

const config = {};

glob.sync(`${basePath}/src/layouts/*.?(pug|jade)`).forEach(item => {
  config.plugins.push(
    new HtmlWebpackPlugin({
      filename: `${path.basename(item, path.extname(item))}.html`,
      template: item
    })
});

Comments

[Денис Букреев]

Круто, спасибо!