javascript - In Webpack, how to enable a plugin according to command line parameters? - Stack Overflow

admin管理员组

文章数量:1356413

Following is the plugin property for my 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({
        pressor: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '{file}',
        algorithm: 'gzip',
        regExp: /\.js$|\.html$/,
    })
],

Sometimes I want to disable the CompressionPlugin while sometimes I want to enable it. However, it looks clumsy to create two webpack config files. I was wondering whether there is a way to enable/disable a plugin dynamically by using mand line parameters?

For example, it will be great if I can use webpack --disable-pression-plugin to disable the CompressionPlugin. Does anyone have any ideas about this?

Following is the plugin property for my 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({
        pressor: {
            warnings: false
        }
    }),
    new CompressionPlugin({
        asset: '{file}',
        algorithm: 'gzip',
        regExp: /\.js$|\.html$/,
    })
],

Sometimes I want to disable the CompressionPlugin while sometimes I want to enable it. However, it looks clumsy to create two webpack config files. I was wondering whether there is a way to enable/disable a plugin dynamically by using mand line parameters?

For example, it will be great if I can use webpack --disable-pression-plugin to disable the CompressionPlugin. Does anyone have any ideas about this?

• javascript
• node.js
• webpack

Share Improve this question Follow asked Jan 27, 2016 at 9:42 Hanfei SunHanfei Sun 47.2k4141 gold badges135135 silver badges252252 bronze badges 1

• also see stackoverflow./a/63343064/3073272 – GorvGoyl Commented Aug 10, 2020 at 15:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Try yargs npm module to do this:

npm install yargs --save-dev

In webpack.config.js:

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

var argv = yargs
    .boolean("disable-pression-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({
                pressor: {
                    warnings: false
                }
            })
        ];


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

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

Just name plugin:

module.exports = {
    /.../
    plugins: [

      // enable by default
      { name: 'order', plugin: new webpack.optimize.OccurenceOrderPlugin() },

      // enable by default
      { name: 'provide', plugin: new webpack.ProvidePlugin({ $: "jquery" }) },

      // enable always
      { plugin: new webpack.optimize.UglifyJsPlugin({ pressor: { warnings: false } }) }

    ]
};

module.exports.plugins.forEach( function(p,i) {
    if ( process.argv.indexOf( '--disable-' + p.name + '-plugin' ) === -1 ) {
        module.exports.plugins[i] = p.plugin;
    } else {
        module.exports.plugins[i] = function() {}
    }
});

本文标签： javascriptIn webpackhow to enable a plugin according to command line parametersStack Overflow