How to create a subdirectory with webpack?

Question

I am trying to bundle multiple HTML files in different directories using webpack but can't get it to work.

The folder structure is:

app
 /25off
   **-index.html**
 /assets
    /fonts
    /images
    /scripts
      -App.js
    /styles
 **- index.html**

I want to bundle together both index.html files. One will be the root and then the other will be at a subdirectory called "25off"

Webpack config is:

const currentTask = process.env.npm_lifecycle_event
const HtmlWebpackPlugin = require('html-webpack-plugin')

let cssConfig = {
    test:/\.css$/i, 
    use: ['css-loader?url=false', 
    {loader: "postcss-loader", options: {postcssOptions: {plugins: postCSSPlugins}}}

    ]
}

let config = {
    entry: './app/assets/scripts/App.js',
    plugins: [
        new HtmlWebpackPlugin({filename: 'index.html', template: './app/index.html'}),
        new HtmlWebpackPlugin({filename: 'index.html', template: './app/25off/index.html'})
        
    ],
    module: {
        rules: [
            cssConfig
        ]
    }
}

if(currentTask == 'dev'){
    cssConfig.use.unshift('style-loader')
    config.output = {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app')
    }
    config.devServer = {
        before: function(app,server){
            server._watch('./app/**/*.html')

        },
        contentBase: path.join(__dirname, 'app'),
        hot: true,
        port: 3000, 
        host: '0.0.0.0'
    }
    config.mode = 'development'


}

Here is how my App.js file is configured:

import '../fonts/stylesheet.css'
import '../styles/styles.css'

if(module.hot){
    module.hot.accept()
}

The CSS is getting applied to my root index.html file but not the one in my 250ff directory as it seems the bundling isn't working on that file. I have tried multiple setups but just can't get it to work. Where am I going wrong here?