javascript - Webpack:我们如何*有条件地*使用插件？

Question

在 Webpack 中，我有以下插件:

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

我想应用 UglifyJsPlugin 仅针对特定目标，所以我尝试使用我预期的条件:

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

但是，这失败了，显示了以下错误消息:

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

TypeError: arguments[i].apply is not a function

请注意，上面的代码类似于在 plugins 数组末尾设置 false(它会发出相同的错误):

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

所以，问题是:有没有办法在 Webpack 上安装条件插件？ (除了使用变量？)

Answer 1

您可以使用使用 the spread operator 的语法

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