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?
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.
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.
Init. Used to initialize a new webpack project.
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.
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),
...
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With