Configure webpack to generate separate vendor js files for each entry

I have multiple js apps in one application. Each js app has different dependency on js libraries and each js app is an entry for webpack. Current webpack setting is generating just one vendor.bundle.js.

How can I configure webpack to generate separate vendor bundle js files for each entry?

Expecting Output:

• vendor.bundle.js
• vendor~app1.bundle.js
• vendor~app2.bundle.js
• app1.bundle.js
• app2.bundle.js

webpack config

module.exports = {
    entry: {
     'app1': './src/AppOne.js',
     'app2': './src/AppTwo.js'
    },

    output: {
        path: path.resolve(__dirname, './resources/js/dist'),
        filename: '[name].bundle.js'
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'vendor',
                    chunks: 'initial',
                    minChunks: 2
                }
            }
        }
    }
}