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 ;