Webpack:我们如何*有条件地*使用插件? [英] Webpack: How can we *conditionally* use a plugin?

问题描述

在 Webpack 中，我有以下插件:

In Webpack, I have the following plugins:

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

我想将 UglifyJsPlugin 仅用于特定目标，所以我尝试使用我想要的条件:

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

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

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
    ]

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

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

推荐答案

您可以使用这种使用 传播运算符

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

这篇关于Webpack:我们如何*有条件地*使用插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！