Running Webpack dev server with multiple exported configurations

Question

There are similar old questions but without any clear solution. The question is as of 2022 does webpack-dev-server support exporting multiple configurations (array)?

After bundling, the dist directory will be as follows:

dist
  home
    index.html
  contact
    index.html

The problem is that webpack dev server only serves the first configuration of the exported array (the configuration of 'contact' in this case).

Is there any way to make webpack server the files in a way that browsing to 'localhost:port/home' returns the home page and browsing to 'localhost:port/contact' returns the contact page?

webpack.config.common.js:

module.exports = Object.entries(getEntries()).map(([bundleName, assets]) => ({
  entry: ["./src/js/main.js", "./src/css/main.css", ...assets],
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, `dist/${bundleName}`),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: true,
      template: path.resolve(
        __dirname,
        `src/views/${bundleName}`,
        "index.html"
      ),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /[\\/]node_modules[\\/]/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
}));

webpack.config.dev.js:

const commonConfigs = require("./webpack.config.common");

var configurations = commonConfigs.map((commonConfig) =>
  merge(commonConfig, {
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
      static: './dist',
      ],
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  })
);

module.exports = configurations;