How to simulate 'if debug' without changing source code (using gulp&webpack)

[ron23]

Hi, So i'm trying to use this GREAT tool but I don't want to change the source code, and I want it to work only in debug mode. I'm using gulp and webpack to build. Any ideas, recommendations, examples? Thanks!

[colbyr]

@ron23 you could use webpack.DefinePlugin to create a condition that will be allowed to install immutable-devtools in the debug build but unreachable in the production build.

// webpack.config.js
var webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production')
    })
  ],
};

In your source you'd have something like this...

// index.js
var immutable = require('immutable');
if (__DEV__) {
  var installDevTools = require('immutable-devtools');
  installDevTools(immutable);
}

When you set NODE_ENV=production, __DEV__ will be replaced with false.

NODE_ENV=production webpack index.js dist/index.min.js

generates

var immutable = require('immutable');
if (false) {
  var installDevTools = require('immutable-devtools');
  installDevTools(immutable);
}
// ...

And then by adding the -p shortcut to webpack for production mode which enables dead code elimination, the condition that requires immutable-devtools will be removed.

NODE_ENV=production webpack -p index.js

var immutable = require('immutable');
// ...

[ron23]

Nice! I thought about everything you said but I didn't know the magic -p !!! Thanks a lot!

[colbyr]

@ron23 you're welcome! You can also get dead code elimination by adding the uglifyjs plugin new webpack.optimize.UglifyJsPlugin() to the plugins array in your webpack.config.js if you want to tune your production build.

[ron23]

Already using it, just didn't know about the dead code removal feature. Thanks a bunch!

[langpavel]

Hi everybody! This is something that Wiki is interested in :-) Can anybody write shot paragraph about this in project wiki?

[langpavel]

@ron23 Thanks! I've added section Using with webpack in Readme based on your comment