How to simulate 'if debug' without changing source code (using gulp&webpack) about immutable-devtools HOT 6 CLOSED

@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');
// ...

from immutable-devtools.

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

from immutable-devtools.

@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.

from immutable-devtools.

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

from immutable-devtools.

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

from immutable-devtools.

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

from immutable-devtools.