How to keep app folder structure with webpack

I am using aurelia and webpack to develop an app. (I am quite new to both of these tools).

The folder structure of the aurelia app is:

src/
    app/
            app.html
            app.js
    page1/
            page1.html
            page1.js
    page2/
            page2.html
            page2.js

The webpack config is currently the what is generated by default by aurelia.

    entry: {
    app: [
        // Uncomment next line if you need to support IE11
        // 'promise-polyfill/src/polyfill',
        'aurelia-bootstrapper'
    ]
},
mode: production ? 'production' : 'development',
output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production
        ? '[name].[chunkhash].bundle.js'
        : '[name].[hash].bundle.js',
    sourceMapFilename: production
        ? '[name].[chunkhash].bundle.map'
        : '[name].[hash].bundle.map',
    chunkFilename: production
        ? '[name].[chunkhash].chunk.js'
        : '[name].[hash].chunk.js'
},

The result is a dist folder containing vendor and app chunk and bundle files.

I would like to be able to arrange the webpack output into the same folder structure

src/
    app/
            app.bundle.map
            app.chunk.js
    page1/
            page1.bundle.map
            page1.chunk.js
    page2/
            page2.bundle.map
            page2.chunk.js

The reason for this structure is to allow me to develop and deploy modules independently.

Any help and guidance would be appreciated!