webpack split js files, get one more files

Question

when I use webpack 4 to split js files, then i get the dist directory contains: app.js, vendor.js and one more js file names vendor~app.js, how and why it comes?

Here are those files:

and this is my webpack config:

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']),
    ]
}

in 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'))

Answer 1

Remove vendor from entry point. It is wrong even semantically.

Those file names are designed to prevent code duplication. If you would have real second entry point: anotheApp.js you would have two options what to load to the page:

1. vendors~anotheApp~app.bundle.js + app.bundle.js
2. vendors~anotheApp~app.bundle.js + anotherApp.bundle.js.

To put each package to its own chink:

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('@', '_')}`;
         },
       },
     },