Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Webpack, how to enable a plugin according to command line parameters?

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({
        compressor: {
            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 command line parameters?

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

like image 994
Hanfei Sun Avatar asked Jan 27 '16 09:01

Hanfei Sun


People also ask

What is the use of webpack CLI?

webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project. As of webpack v4, webpack is not expecting a configuration file, but often developers want to create a more custom webpack configuration based on their use-cases and needs.

How does webpack plugin work?

A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.

What does the webpack init command do?

Init. Used to initialize a new webpack project.

How do you set mode in webpack?

Set 'mode' option to 'development' or 'production' to enable defaults for this environment. We can get around this by passing --mode production in the cmdline like below: npm run webpack --mode development ... As is mentioned on the webpack documentation, blog and everywhere else on the internet.


1 Answers

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-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),
    ...
};
like image 121
Dmitry Yaremenko Avatar answered Nov 14 '22 02:11

Dmitry Yaremenko