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

【问题标题】：webpack-cli TypeError: webpack.optimize.CommonsChunkPlugin is not a constructorwebpack-cli TypeError: webpack.optimize.CommonsChunkPlugin 不是构造函数
【发布时间】：2022-06-25 23:10:37
【问题描述】：

希望到目前为止每个人都度过了一个愉快的周末。

所以我在运行时检索到这个错误：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
  ]
}

有人知道我该如何解决这个问题吗？提前致谢

【问题讨论】：

标签： javascript webpack

【解决方案1】：

这是因为 webpack.optimize.CommonsChunkPlugin 在 webpack v4 上被移除了。所以很可能，当你更新 webpack 版本时，你丢失了这个。

CommonChunkPlugin 现在是优化节点内的 splitChunks 配置。

见optimization.splitChunks

【讨论】：