How can I set up multiple HTML pages in subfolders with webpack?

Question

I have an application with multiple pages and am using webpack to package js, css and images. I am using Htmlwebpackplugin to create dist html files and I have a Function map to load multiple html pages from a folder and put them into Htmlwebpackplugin. However, I still get the error "cannot GET /...html".

Here’s how my src directory should be:

    ├── src
    │   ├── html
    │   │   └── mostras 
    │   │       ├─ page1.html
    |   |       ├─ page2.html
    |   |       ├─ page3.html (...)

Here is my webpack.config.js file:

const path = require("path");
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const fs = require('fs');

function generateHtmlPlugins (templateDir) {
  // Read files in template directory
  const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir))
  return templateFiles.map(item => {
    // Split names and extension
    const parts = item.split('.')
    const name = parts[0]
    const extension = parts[1]
    // Create new HTMLWebpackPlugin with options
    return new HTMLWebpackPlugin({
      inject: true,
      filename: `${name}.html`,
      template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
      chunks: [`${name}`],
    })
  })
}

const mostrasHtml = generateHtmlPlugins('./src/html/mostras');

module.exports = {
  entry: ["babel-polyfill", "./src/js/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/bundle.js",
    publicPath: "/",
  },
  devServer: {
    contentBase: "./dist",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s?[ac]ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'file-loader', 
            options: { 
              name: '[path][name].[ext]',
            }
          }
        ],
        exclude: path.resolve(__dirname, './src/index.html')
      },
      {
        test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
        loader: 'file-loader',  // <-- retain original file name
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
      chunkFilename: "[name].css"}),
    new HTMLWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",
    }),
  ]
  .concat(mostrasHtml)
};

I know that if I put all the . html files in the root folder, it might work. However, I have many pages to do so, it would be a mess.

Anyone can help?