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

请注意，上面的代码类似于 false 在 plugins 数组的末尾（发出相同的错误）：

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

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

原文由 user2078023 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用使用 扩展运算符的 语法

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

原文由 unloco 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在我的 webpack.config.js 条件下，我推送到插件数组

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        ...
    },
    output: {
        ...
    },
    module: {
        rules: [
            ...
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
};

if (TARGET === 'build') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            drop_console: true,
        }),
    );
}

原文由 Jeff Puckett 发布，翻译遵循 CC BY-SA 4.0 许可协议