How to set up webpack only once, to compile multiple vue apps into separate js bundles

Question

I'm trying to configure webpack to compile/bundle small standalone Vue apps (each living in their own separate subdirectory) once, automatically from the top level; instead of setting up webpack inside each of the subdirectories and manually running an npm run build on each of them. How can I achieve this? Below is my current directory structure which works for one app under front-end(the Django subdirectories are not relevant so I've left them out):

.
├── db.sqlite3
├── front-end/
│   ├── App.vue
│   ├── assets
│   ├── components
│   └── main.js
├── manage.py
├── node_modules/
├── package-lock.json
├── package.json
├── django_project/
├── django_app/
├── static (where i want all the outputs to go)
│   ├── d61e288f5de33456b33fb3c47275f16c.png
│   └── index-bundle.js
└── webpack.config.js (id like this top level config to bundle multiple subdirs)

My top level web pack config looks like the following, but currently is only for one Vue app (front-end), whereas I'd like to ideally have several apps under their own subdirs there instead (front-end/vue-app-1, front-end/vue-app-2 etc.):

const path = require('path');
const {VueLoaderPlugin} = require('vue-loader')


module.exports = {
    entry: './front-end/main.js',  // path to our input file
    output: {
        filename: 'index-bundle.js',  // output bundle file name
        path: path.resolve(__dirname, './static'),  // path to our Django static directory
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env', {targets: "defaults"}]
                    ]
                }
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    {loader: 'file-loader'},
                    {loader: 'image-webpack-loader'},
                ]
            }
        ]
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ]
};

Note: the idea is to NOT have to create entirely separate webpack/babel configurations like the following and build them manually:

├── vue-app-1
│   ├── README.md
│   ├── babel.config.js
│   ├── dist
│   ├── jsconfig.json
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   └── vue.config.js
├── vue-app-2
│   ├── README.md
│   ├── babel.config.js
│   ├── dist
│   ├── jsconfig.json
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   └── vue.config.js

Thank you so much in advance! I appreciate any additional input since im fairly new to bundling etc. I tried playing around but I dont really see options in web pack for doing this.

PS: in case its helpful, I'm trying to build a hybrid Django + vue app, whereby I can simply drop in the relevant imports into my django templates to get it to load standalone Vue apps where necessary.