Webpack: Multiple HTML files into multiple directories

Question

I'm using webpack to create multiple HTML files. I need to organize my files into multiple directories because I have many files and I can't have all in the main root. In this post explain how to create multiple files using HTMLWebpackPlugin. But the structure of my project is different because I need one js and CSS file for multiple HTML files in different folders:

/
|- package.json
|- webpack.config.js
  /src
   |- index.html
   |- index.js
   |- stylesheet.css
   | /folder1
      |- htmlfile.html
      |- htmlfile1.html
      |- htmlfile2.html
      |- htmlfile3.html
   | /folder2
      |- htmlfile4.html
      |- htmlfile5.html
      |- htmlfile6.html

I set the base tag in this form.

<base href="/">

It works in development mode but when I compile my project, files and asset routes appear broken. It's only HTML files with CSS and little functionalities in javascript, so for example, if I open a file in local mode all routes are pointing to the C:// folder and not to my project folder.

I've tried to configure the publicPath in my webpack.config in this way

output: {
      publicPath: './'
},

But in this case, all files are relative to the folders. So, for example, my stylesheet is in the main root and files appear in this way [foldername]/stylesheet.css

My webpack.config.js file:

const HtmlWebPackPlugin = require('html-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

module.exports = (env, options) => {
  return {
    output: {
      publicPath: './',
    },
    devtool: options.mode === 'development' ? 'eval-source-map' : false,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
              options: {interpolate: true} //, minimize: true 
            }
          ]
        },
        {
          test: /\.(scss|css)$/,
          use: [
            MiniCssExtractPlugin.loader,

            {
              loader: 'css-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                autoprefixer: {
                  browsers: ['last 2 versions']
                },
                plugins: () => [autoprefixer],
              }
            },
            {
              loader: 'sass-loader'
            }
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif|mp3|m4a|ico)$/,
          use: {
            loader: 'file-loader?limit=100000000',
            options: {
              name: '[path][name].[ext]',
            },
          }
        }
      ]
    },
    optimization: {
      minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: 'stylesheet.css', //[name].css
        chunkFilename: 'stylesheet.css', //[id].css
      }),
      new HtmlWebPackPlugin({
        filename: 'index.html',
        template: './src/index.html'
      }),
      new HtmlWebPackPlugin({
        filename: 'folder1/file1.html',
        template: './src/folder1/file1.html'
      }),
      new HtmlWebPackPlugin({
        filename: 'folder2/file2.html',
        template: './src/folder2/file2.html'
      }),
    ]
  };
};