How to setup pug in webpack for multipage layout?

Question

Pug

Recently I started to deal with Webpack and I got this assembly:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader'
    }, 
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {sourceMap: true}
        },
        {
          loader: "postcss-loader",
          options: {sourceMap: true, config: { path: 'src/js/postcss.config.js'}}
        },
        {
          loader: "sass-loader",
          options: {sourceMap: true}
        }
      ]
    },
    {
      test: /\.css$/,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {sourceMap: true}
        },
        {
          loader: "postcss-loader",
          options: {sourceMap: true, config: { path: 'src/js/postcss.config.js'}}
        }
      ]
    },
    {
      test: /\.pug$/,
      loaders: [
        {
          loader: "html-loader"
        },
        {
          loader: "pug-html-loader",
          options: {
            "pretty":true
          }
        }
      ]
    }]
  },
  devServer: {
    overlay: true
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    }),
           //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: './src/page/index.pug'
    }),
    new HtmlWebpackPlugin({
      filename: "blog.html",
      template: './src/page/blog.pug'
    })
  ]
}

I am interested in the following, at the moment I find the index.pug and blog.pug files and they are generated in index.html and blog.html, but how to make all files with the .pug extension be located and generated in html, instead of prescribing the path for each file?
tried doing the following:

new HtmlWebpackPlugin({
     filename: "[name].html",
     templates: './src/page/*.pug'
})

but not what was needed

Answer 1

If still relevant, then you can do this:

const fs = require('fs')
{...}
const PATHS = {
  src: path.join(__dirname, '../src'),
  dist: path.join(__dirname, '../dist'),
  assets: 'assets/'
}
{...}
const PAGES_DIR = `${PATHS.src}/${PATHS.assets}pages/`
const PAGES = fs.readdirSync(PAGES_DIR).filter(fileName => fileName.endsWith('.pug'))
{...}
module.exports = {
  {...}
  plugins: [
    {...}
    ...PAGES.map(page => new HtmlWebpackPlugin ({
      template: `${PAGES_DIR}/${page}`,
      filename: `./${page.replace(/\.pug/,'.html')}`
    }))
  ],
}