javascript - webpack-cli TypeError: webpack.optimize.CommonsChunkPlugin is not a constructor - Stack Overflow

admin管理员组

文章数量:1401273

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 webpackmon.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

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.mon.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

• javascript
• webpack

Share Improve this question Follow asked Jan 22, 2022 at 10:39 davyionerdavyioner 19122 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptwebpackcli TypeError webpackoptimizeCommonsChunkPlugin is not a constructorStack Overflow