node.js - Webpack + Multiple folder with multiple files

Question

I have folders and files like below structure. Just I am trying to generate files based on folder structure..

Folder-A
    css
        a.css
        b.css
        c.css
    templates
        index.html
    js
        1.js
        2.js
        3.js

Folder-B
    css
        a.css
        b.css
        c.css
    templates
        index.html
    js
        1.js
        2.js
        3.js

The problem is

1. the css files not generating based on folder.
2. All css file included in index.html. its not included based on folder structure

Expected output:

1. Css,html,images,fonts files should generate dist/{folder} respective folders
2. Generated HTML files includes CSS only which has in the respective folder.

[![Sample-format][1]][1]

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: {
    test1: [
      './folder-a/js/index.js',
      './folder-a/templates/index.html'
    ],
    test2: [
        './folder-b/js/index.js',
        './folder-b/templates/index.html'
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: "/dist/"
  },
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: { 
              url: false 
            }
          }
        ]
      },
      {
        test: /.pug$/,
        use: ['pug-loader'],
      },
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader?presets[]=es2015',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: "[name].css"
    }),
    new HtmlWebpackPlugin({
      filename: 'folder-a/index.html',
      template: './folder-a/index.html',
    }),
    new HtmlWebpackPlugin({
      filename: './folder-b/index.html',
      template: './folder-b/index.html',
    }),
    new CopyPlugin({
      patterns: [
        { from: './folder-a/images', to: './folder-a/images' },
        { from: './folder-b/images', to: './folder-b/images' }
      ],
    }),
  ]
};

Just [1]: https://i.stack.imgur.com/h4OL3.png

Answer 1

等待大神答复