Webpack 4.5 - Error: webpack.optimize.CommonsChunkPlugin has been removed

[mr-shovel]

Using webpack manually: testing webpack functionality returns an error:

node_modules/.bin/webpack static/App.js static/app.bundle.js
/home/mark/pro-mern-stack/node_modules/webpack-cli/bin/webpack.js:242
throw err;
^

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
at Object.get [as CommonsChunkPlugin] (/home/mark/pro-mern-stack/node_modules/webpack/lib/webpack.js:165:10)
at Object. (/home/mark/pro-mern-stack/webpack.config.js:14:30)
at Module._compile (/home/mark/pro-mern-stack/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (/home/mark/pro-mern-stack/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (/home/mark/pro-mern-stack/node_modules/webpack-cli/bin/convert-argv.js:133:13)
at requireConfig (/home/mark/pro-mern-stack/node_modules/webpack-cli/bin/convert-argv.js:135:6)
at /home/mark/pro-mern-stack/node_modules/webpack-cli/bin/convert-argv.js:142:17
at Array.forEach ()
at module.exports (/home/mark/pro-mern-stack/node_modules/webpack-cli/bin/convert-argv.js:140:15)
at yargs.parse (/home/mark/pro-mern-stack/node_modules/webpack-cli/bin/webpack.js:239:39)
at Object.parse (/home/mark/pro-mern-stack/node_modules/yargs/yargs.js:552:18)
at /home/mark/pro-mern-stack/node_modules/webpack-cli/bin/webpack.js:217:8
at Object. (/home/mark/pro-mern-stack/node_modules/webpack-cli/bin/webpack.js:514:3)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)
at Function.Module._load (module.js:493:3)
at Module.require (module.js:593:17)
at require (internal/module.js:11:18)
at Object. (/home/mark/pro-mern-stack/node_modules/webpack/bin/webpack.js:80:2)
at Module._compile (module.js:649:30)
at Object.Module._extensions..js (module.js:660:10)
at Module.load (module.js:561:32)
at tryModuleLoad (module.js:501:12)

[rashmitpankhania]

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
        app: './src/App.jsx',
    },
    output: {
        path: path.join(__dirname, './static'),
        filename: "[name].bundle.js"
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    module: {
        rules:[
            {
                test:/\.jsx$/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react','es2015']
                    }
                }
            },
         ]
     },
 };

try the above one as the error says try to use config.optimization.splitChunks instead i have added optimization property and seems to works for me.

[alekhyaNynala]

when I write this, optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
AN ERROR IS DISPLAYED
C:\Users\hp\Desktop\web2.0-master\webpack.config.js:130
[0] }; SyntaxError: Unexpected token ;