clean-webpack-plugin only accepts an options object

Question

I'm getting

Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-

My Webpack.config.js file looks like this:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

var plugins = [
    new CleanWebpackPlugin(['dist'], {}),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new CopyWebpackPlugin([{
        from: './src/images/',
        to: './images/'
    }]),
    new HtmlWebpackPlugin({
        inject: false,
        template: 'src/index.html'
    })
];

var config = {
    entry: [
        './src/js/main.js'
    ],

    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/bundle.js',
    },

    plugins: plugins.concat([
        new ExtractTextPlugin('css/bundle.css'),
        //new webpack.optimize.UglifyJsPlugin(require('./uglifyjs.json'))
    ]),
    devServer: {
        inline: true,
        port: 8080
    },

    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            include: path.join(__dirname, 'src'),
            loader: 'babel',
            query: {
                presets: ['react', 'es2015']
            }},
            {
                test: /.s?css$/,
                include: path.join(__dirname, 'src'),
                loader: ExtractTextPlugin.extract('style', [
                    'css?sourceMap',
                    'postcss',
                    'sass?sourceMap'
                ])
            },
            {
                test: /\.css$/,
                include: path.join(__dirname, 'node_modules'),
                loader: 'style!css'
            }
        ]
    },
    postcss: function() {
        return [
            require('autoprefixer')({
                browsers: ['last 2 versions']
            })
        ];
    }
}
module.exports = config;

Answer 1

As you can see from the page the error message links, CleanWebpackPlugin does not accept two arguments as you're passing in:

new CleanWebpackPlugin(['dist'], {}),

Instead, just try

new CleanWebpackPlugin(),

if you don't need to pass in any options.

You may be seeing this problem if you're, say, following an older tutorial or such which uses a different version of the plugin, and the interface has changed meanwhile.

Answer 2

Like @AKX mentioned, newest version of clean-webpack-plugin doesn't accept array argument anymore.

The path which should be clearing is reading from webpack's output.path. In your example code it's here:

output: {
  path: path.join(__dirname, 'dist'),
  // rest of code
},

You should be very carefull, because someones still use pattern like this:

output: {
  path: __dirname,
  filename: './dist/bundle.js'
},

Above configuration will cause removing all files in your project!

If you need to clear only some files from webpack's output.path you should set cleanOnceBeforeBuildPatterns field in object passed into CleanWebpackPlugin constructor.