Webpack config to generate bundles of two different React SPAs

I have a project with the following structure:

.
├── app
│   ├── icon.svg
│   ├── index.html
│   └── scripts
├── config
│   └── iparams.json
├── jest.config.js
├── manifest.json
├── __mocks__
│   └── svgrMock.js
├── package.json
├── public
│   ├── index.html
│   └── iparams.html
├── setUpTests.js
├── src
│   ├── App.css
│   ├── app.index.css
│   ├── app.index.js
│   ├── App.js
│   ├── App.test.js
│   ├── assets
│   ├── components
│   ├── Config.css
│   ├── config.index.css
│   ├── config.index.js
│   ├── Config.js
│   ├── hooks
│   ├── log
│   └── logo.svg
├── webpack.config.js
└── yarn.lock

It have two main SPAs: config and app, so, I need to generate two different bundles respectively to ./config and ./app using webpack. The ./src/config.index.js is the entry point of the config app, witch renders the ./src/Config.js React component to the ./config/iparams.html page (using the ./public/iparams.html template). The same logic holds for the app page.

Currently I'm using this webpack config without success:

'use strict';

const HtmlWebPackPlugin = require('html-webpack-plugin');
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  entry: {
    '../app/': ['@babel/polyfill', `${process.cwd()}/src/app.index.js`],
    '../config/': ['@babel/polyfill', `${process.cwd()}/src/config.index.js`]
  },
  output: {
    globalObject: 'this',
    path: `${process.cwd()}/dist`,
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].js',
    publicPath: './scripts',
    clean: true
  },
  devtool: 'source-map',
  module: {
    rules: [{
        test: /\.(js|jsx|ts|tsx|test.js)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name][contenthash:8].[ext]',
            outputPath: '/assets/img',
            esModule: false
          }
        }]
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader'
        }]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      dangerouslyAllowCleanPatternsOutsideProject: true,
      dry: false
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css',
      chunkFilename: '[name].[contenthash:8].css'
    }),
    new HtmlWebPackPlugin({
      template: `${process.cwd()}/public/index.html`,
      filename: `${process.cwd()}/app/index.html`
    }),

    new HtmlWebPackPlugin({
      template: `${process.cwd()}/public/iparams.html`,
      filename: `${process.cwd()}/config/iparams.html`
    }),
    new CopyWebpackPlugin([
      {
        from: 'dist/**/*',
        to: '../app'
      }
    ]),
  ],

  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          chunks: 'all'
        }
      }
    }
  }
};

What is the correct webpack configuration for this use case? Note that I'm using a proprietary sdk which doesn't allow a custom build script, just a custom webpack config, also, the pages outputs must be ./app and ./config.