I have configured multiple entries in webpack-dev-server. When I run webpack-dev-server using webpack serve,
it successfully loads the JavaScript files for the index.html located in the dist folder.

When I directly enter http://localhost:8080/my-place/ in the browser to access the index.html file inside the my-place folder, an error occurs. the index.html inside the my-place folder fails to load the JavaScript files properly.

The following error occurs:
GET http://localhost:8080/my-place/MyPlace.js net::ERR_ABORTED 404 (Not Found)

Why is it unable to load the JavaScript files correctly?

I would be truly grateful if you could help me.

Here are my webpack.config.js and folder structure.

const path = require("path");
const CleanPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    SharePlace: "./src/SharePlace.js",
    MyPlace: "./src/MyPlace.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist", "my-place", "assets", "scripts"),
  },
  devtool: "eval-cheap-module-source-map",
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "dist"),
        publicPath: "/",
      },
      {
        directory: path.join(__dirname, "dist", "my-place"),
        publicPath: "/my-place",
      },
    ],
  },
  module: {
    rules: [
      {
        test: /.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                { useBuiltIns: "usage", corejs: { version: 3 } },
              ],
            ],
          },
        },
      },
    ],
  },
  plugins: [new CleanPlugin.CleanWebpackPlugin()],
};

enter image description here