Webpack: несколько файлов HTML в несколько каталогов

Question

Я использую веб-пакет для создания нескольких файлов HTML. Мне нужно организовать свои файлы в несколько каталогов, потому что у меня много файлов, и я не могу иметь все в главном корне. В этом посте объясняется, как создавать несколько файлов с помощью HTMLWebpackPlugin. Но структура моего проекта отличается, потому что мне нужен один файл js и CSS для нескольких файлов HTML в разных папках:

/
|- 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

Я установил базовый тег в этой форме.

<base href="/">

Он работает в режиме разработки, но когда я компилирую свой проект, файлы и маршруты ресурсов выглядят поврежденными. Это только HTML-файлы с CSS и небольшим количеством функций в javascript, поэтому, например, если я открываю файл в локальном режиме, все маршруты указывают на папку C: //, а не на папку моего проекта.

I 'я попытался настроить publicPath в моем webpack.config следующим образом

output: {
      publicPath: './'
},

Но в этом случае все файлы относятся к папкам. Так, например, моя таблица стилей находится в основном корне, и файлы выглядят следующим образом [foldername] /stylesheet.css

Мой файл webpack.config.js:

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'
      }),
    ]
  };
};