javascript - Webpack中如何根据命令行参数启用插件？

Question

以下是我的 webpack.config.js 的插件属性:

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production'),
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compressor: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '{file}',
        algorithm: 'gzip',
        regExp: /\.js$|\.html$/,
    })
],

有时我想禁用 CompressionPlugin 而有时我想启用它。但是，创建两个 webpack 配置文件看起来很笨拙。我想知道是否有一种方法可以通过使用命令行参数动态启用/禁用插件？

例如，如果我可以使用 webpack --disable-compression-plugin 来禁用 CompressionPlugin，那就太好了。有人对此有任何想法吗？

Answer 1

尝试使用 yargs npm 模块来执行此操作:

npm install yargs --save-dev

在 webpack.config.js 中:

var webpack = require('webpack');
var yargs  = require("yargs");
...

var argv = yargs
    .boolean("disable-compression-plugin")
    .argv;
...

// use argv.disableCompressionPlugin to check the option

module.exports = {
    ...
    plugins: (function(argv) { 
        var plugins = [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify('production'),
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compressor: {
                    warnings: false
                }
            })
        ];


        // HERE IS OPTION CONDITION
        if (argv.disableCompressionPlugin) {
            plugins.push(new CompressionPlugin({
                asset: '{file}',
                algorithm: 'gzip',
                regExp: /\.js$|\.html$/,
            }));
        }

        return plugins;
    })(argv),
    ...
};