There are 2 questions:

Using webpack, how to:

1. Bundle multiple html pages/views into a folder so that we end up with the same folder structure before bundling (more explained later)
2. Bundle 2 files (main.js and main.css) and inject them into every html output

For the first question, glob can be used to match patterns and get the folders containing the entries. But Is It possible to automate the webpack bundling process using some function that loops through each folder and bundling its content into a folder with the same name ?

This is the folder structure before bundling:

src
  js
    main.js
  css
    main.css
  views
    home
      home.html
      home.js
      home.css
    about
      about.html
      about.js
      about.css

This is the desired folder structure after bundling:

dist
  js
      main.js
  css
      main.css
  home
    index.html
    index.js
    index.css
  about
    index.html
    index.js
    index.css

`home/home.html' and 'about/about.html' should inject the 'main.js' script and 'main.css' stylesheet

Current webpack config:

module.exports = {
  entry: {
    home: [
      "./src/js/main.js",
      "./src/css/main.css",
      "./src/views/home/index.js",
      "./src/views/home/index.css",
    ],
  },
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      inject: true,
      template: path.resolve(__dirname, "src/views/home", "index.html"),
    }),
  ]
}