Как настроить pug в Webpack для многостраничной верстки?

Question

[MishaPandovich]

Недавно начала разбираться с Webpack и у меня получилась вот такая сборка:

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

Интересует следующее, на данный момент я нахожу файлы index.pug и blog.pug и они генерируются в index.html и blog.html, а как сделать чтобы находились все файлы с расширением .pug и генерировались в html, вместо того, чтобы прописывать путь к каждому файлу?
пробовала сделать следующее:

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

но собиралось не то, что нужно

Answer 1

[Алексей Шелементьев]

Если еще актуально, то можно сделать так:

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

Answer 2

[Максим Власов]

Попробуй те так:

let pages = glob.sync(__dirname + '/source/pages/*.pug');
  pages.forEach(function (file) {
    let base = path.basename(file, '.pug');
    pluginsOptions.push(
      new HtmlWebpackPlugin({
        filename: './' + base + '.html',
        template: './pages/' + base + '.pug',
        inject: true
      })
    )
  });
..........
plugins: pluginsOptions