How to set multiple file entry and output in project with webpack and JavaScript?

To set multiple file entry and output in project with webpack and JavaScript, we set the entry and output property.

For instance, in webpack.config.js, we write

module.exports = (env, options) => ({
  //...
  entry: {
    "dir1/js/bundle": path.resolve(__dirname, "/apps/dir1/js/main.js"),
    "dir2/foo": path.resolve(__dirname, "/apps/dir2/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "/apps"),
    filename: "[name].js",
  },
  //...
});

to add the entry property and set it to an object with the paths of the entry point files.

And we set the output property to an object with the path to output the files by setting the path property.

We set filename to the output file name.