webpack-cli TypeError: webpack.optimize.CommonsChunkPlugin 不是构造函数

Question

Hope everybody is having a good weekend so far.

So i retrieve this error when running: webpack --config webpack.dev.js

This happened after I updated NVM NPM and Webpack. Running Windows 10.

I already tried all of the stackoverflow solutions but nothing seems to work for me unfortunately.

This is my webpack.common.js

const path = require('path');
var webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const extractCSS = new ExtractTextPlugin('[name].[chunkhash].css')
const extractCSS  = new ExtractTextPlugin({
  filename: '[name].[chunkhash].css',
  allChunks: true
});

module.exports = {
  entry: {
    app: ['./src/js/app.js'],
    //vendor: ['bootstrap', 'jquery', 'socket.io-client', './src/js/jquery.tablesorter.min.js', 'purecloud-platform-client-v2'],
    vendor: ['bootstrap', 'jquery', 'socket.io-client', './src/js/jquery.tablesorter.min.js'],
    'styles-custom': __dirname + '/src/js/styles-custom.js',
    'styles-vendor': __dirname + '/src/js/styles-vendor.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '',
    filename: '[name].[chunkhash].js'
  },
  node: {
    fs: 'empty',
    tls: 'empty'
  },
  module: {
    rules: [{
      test: /\.css$/i,
      use: extractCSS.extract({
        use: {
          loader: 'css-loader',
          options: {
            minimize: true
          }
        }
      })
    },
    {
      test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[hash].[ext]',
        publicPath: '',
        outputPath: 'assets/'
      }  
    }]
  },
  plugins: [   
    new CleanWebpackPlugin(['dist']),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      options: {
        context: __dirname
      }
    }),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/assets/index.template.html'
    }),
    extractCSS
  ]
} 

Does anybody know how I can fix this? Thanks in advance

Answer 1

It's because webpack.optimize.CommonsChunkPlugin it was removed on webpack v4. So probably, when you updated the webpack version you lost this.

CommonChunkPlugin it's now splitChunks configuration inside optimization node.

See optimization.splitChunks