NPM + React + Webpack: How Does Switching Development/Product Modes Work?

Question

I understand there's a difference between development and product versions of React.js, and if I were using script tags, I would simply use the minified version for production.

But how does this work when I'm using NPM to get React.js, and Webpack to import it? A cursory examination of React.js source code did not reveal any conditional loading based on NODE_ENV.

Answer 1

That's because source code actually does not expose process.env.NODE_ENV , which I assume for readability reason, and environment variables are injected in release build. Danger.js in [email protected] for instance,

production build - https://npmcdn.com/[email protected]/lib/Danger.js

source code - https://github.com/facebook/react/blob/v0.14.7/src/renderers/dom/shared/Danger.js

You can see invariant() call and __DEV__ condition expression get replaced.