How to set up multiple entry points (html) in webpack?

Question

webpack

I am doing a preliminary layout of the project pages.
For writing HTML I use PUG and HtmlWebpackPlugin.
And now I have this veil of code:

Look

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'
    }),

At the same time, every time you have to reload the project when you add a new page.
I would like to configure once, for example:

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

But it doesn't work

Answer 1

Read files/directories and generate instances in a loop.
Or use the same globs for generation.
(with globs, the code is not mine, but the essence is the same)

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
    })
});