How to solve 'Type is not allowed' in webpack.config.js entry?

Question

I thy to optimize my application on webpack and one of the solutions that I found is to split my code into different enty points from the webpack instruction (https://webpack.js.org/configuration/entry-context/#dependencies), but code entry: { app: { import: './app.js', dependOn: 'react-vendors' }}, it tells that I can't use Object type, I should use string or array. Should I change something in my webpack configuration? or use other version of webpack? Now I use webpack 4.43. Here is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
    // mode:'development',
    entry: {
        main: './src/index.js',
    },
    output: {
        filename: '[name].bungle.js',
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: '[name].bundle.js',
    },
    plugins: [
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

        new HtmlWebpackPlugin({
            title: 'Development',
            template:'./index.html'
        }),
        new VueLoaderPlugin(),
        new VuetifyLoaderPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',

        }
    },

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
            {
                //Правила для vue.js
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                // Правила для обработки css стилей
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.s(c|a)ss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        // Requires sass-loader@^7.0.0
                        // options: {
                        //     implementation: require('sass'),
                        //     fiber: require('fibers'),
                        //     indentedSyntax: true // optional
                        // },
                        // Requires sass-loader@^8.0.0
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers'),
                                indentedSyntax: true // optional
                            },
                        },
                    },
                ],
            },

        ]
    },

};

Answer 1

Here is an example for the version of webpack you are using

optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](vue|vuetify)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }