webpack-cli 类型错误：webpack.optimize.CommonsChunkPlugin 不是一个构造函数。

Question

希望大家周末过得愉快。

当我运行 "webpack --config webpack.dev.js" 时，遇到了以下错误：

这是在更新了NVM、NPM和Webpack之后发生的。 我使用的是Windows 10。

我已经尝试了所有stackoverflow的解决方法，但不幸的是，似乎没有任何方法适用于我。

这是我的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
  ]
} 

有人知道我该如何修复这个问题吗？先感谢了。

- davyioner

Answer 1

这是因为 webpack.optimize.CommonsChunkPlugin 在 Webpack v4 版本中被移除了。所以当你更新 Webpack 版本时，可能会丢失此插件。

现在CommonChunkPlugin已经作为splitChunks配置的一部分，位于optimization节点下。

请参考optimization.splitChunks

- Andoni