Javascript 网页包拆分js文件，再获取一个文件

当我使用webpack 4拆分js文件时，我得到的dist目录包含：app.js、vendor.js和另外一个js文件名vendor~app.js，它是如何产生的，为什么产生的

以下是这些文件：

这是我的网页配置：

const path = require('path');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    mode: 'production',

    entry: {
        vendor: ['react', 'react-dom', 'redux', 'react-redux', 'react-router-dom'],
        app: './src/entry.js'
    },

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

    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        babelrc: false,
                        presets: [['@babel/preset-env', {
                            "modules": false
                        }], '@babel/preset-react'],
                        plugins: ['@babel/plugin-transform-runtime', "@babel/plugin-proposal-class-properties"]
                    }
                }]
            },
        ]
    },

    optimization: {
        runtimeChunk: {
            name: 'manifest'
        },
        splitChunks: {
            minChunks: 1,
            minSize: 2,
            chunks: 'all',
            name: true,
            cacheGroups: {
                common: {
                    test: 'vendor',
                    chunks: 'initial',
                    name: 'vendor',
                    enforce: true,
                }
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
    ]
}

在my entry.js中：

import React, { Component } from 'react'

import ReactDOM from 'react-dom'

class App extends Component {

    constructor (props) {
        super(props);
    }

    render () {
        return (
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('app'))

import React，{Component}来自“React”
从“react dom”导入react dom
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
渲染（）{
返回(
你好，世界
)
}
}
ReactDOM.render（，document.getElementById（'app'））

从入口点删除供应商。它甚至在语义上也是错误的

这些文件名旨在防止代码重复。 如果您有真正的第二个入口点：anotheApp.js，那么您有两个选项可以加载到页面：

供应商~anotheApp~app.bundle.js+app.bundle.js

供应商~anotheApp~app.bundle.js+anotherApp.bundle.js

要将每个包装放在自己的缝隙中：

optimization: {    runtimeChunk: 'single',    splitChunks: {
     chunks: 'all',
     maxInitialRequests: infinity,
     cacheGroups: {
       vendor: {
         test: /[\\/]node_modules[\\/]/,
         vendorname(v) {
           var name = v.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
           return `npm.${name.replace('@', '_')}`;
         },
       },
     },

---

但我如何在不使用入口点的情况下拆分此类供应商文件呢