Webpack: How can we *conditionally* use a plugin?

Question

In Webpack, I have the following plugins:

plugins: [
        new ExtractTextPlugin(\'styles.css\'),
        new webpack.optimize.UglifyJsPlugin({
            com         


        

Answer 1

You can use mode argument in webpack to pass development/production value to webpack config and then conditionally load plugins.

NPM Script:

"start": "webpack --watch --mode=development",
"build": "webpack --mode=production",

webpack.config.js:

module.exports = (env, argv) => {
  console.log("mode: ", argv.mode);

  const isDev = argv.mode === "development";

  const pluginsArr = [new CleanWebpackPlugin()];

  // load plugin only in development mode
  if (isDev) {
    pluginsArr.push(new ExtensionReloader({}));
  }
  return {
    entry: {},
    devtool: isDev ? "inline-source-map" : "", // generate source code only in development mode

    plugins: pluginsArr,
    output: {},
  };
};