Webpack: How can we *conditionally* use a plugin?

Question

In Webpack, I have the following plugins:

plugins: [         new ExtractTextPlugin('styles.css'),         new webpack.optimize.UglifyJsPlugin({             compress: {                 warnings: false             },             drop_console: true,         }),     ] 

I would like to apply the UglifyJsPlugin only for a specific target, so I tried using my intended conditional:

plugins: [         new ExtractTextPlugin('styles.css'),         (TARGET === 'build') && new webpack.optimize.UglifyJsPlugin({             compress: {                 warnings: false             },             drop_console: true,         }),     ] 

However, this fails, showing the following error message:

E:\myProject\node_modules\tapable\lib\Tapable.js:164             arguments[i].apply(this);                          ^  TypeError: arguments[i].apply is not a function 

Note that the above code is similar to having false at the end of the plugins array (which emits the same error):

plugins: [         new ExtractTextPlugin('styles.css'),         false     ] 

So, the question is: Is there a way to have conditional plugins on Webpack? (other than using variables?)

Answer 1

You can use this syntax which uses the spread operator

plugins: [     new MiniCssExtractPlugin({         filename: '[name].css'     }),     ...(prod ? [] : [new BundleAnalyzerPlugin()]), ],