Environment variable with webpack on dev and production

Question

I am pretty new to the world of using such build tools like Webpack and its relatives, so maybe this question is a little noobish but please understand me.

background: I am developing an client side web app (using reactjs + redux) and using webpack as my build tool and dev-server loader. Right now I have to make some lines of code only in dev environment (logging and stuff). So I saw over the net the usage of webpack.DefinePlugin plugin to set the process.env.NODE_ENV variable and the code is like this:

plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        })
] 

Then if the NODE_ENV varibale is not set on my machine (which is not at the moment) it automatically set to development. Am I right?

What about the production machine? do i need to set this env variable to 'production' in the /etc/environment file?

Then another question is how webpack knows what is the NODE_ENV when I serve the app? is it compiled when I do the build on the production machine and set in the built bundle.js? ($ webpack --progress -p)

Another question is how do I enable/disable features in production or development environment? just do an if condition statement like this:

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

And last one, if this is what webpack really does, is it transpiling this piece of code to the built bundle.js? if so, it is visible to end user right? is there something to do with that?

Hope it's not to much, thanks a bunch!

Answer 1

On the production machine you can build your scripts with command

NODE_ENV=production webpack

On the other hand passing this variable to /etc/environment is also solution.

---

process.env.NODE_ENV is converted to static string in bundle.js

for example if you run NODE_ENV=production webpack on this snippet

if(process.env.NODE_ENV == 'development'){
    console.log('this is visible in development');
}

in bundle.js you will find (edited)

if ('production' == 'development') {
    console.log('this is visible in development');
}

if (false) { // 'production' == 'development'
    console.log('this is visible in development');
}

---

So according to question about enable/disable features your code is valid.

---

If you want to remove body of condition if it is false (like in above example you don't want to show console.log('this is visible in development'); in production environment), you should use

new webpack.optimize.UglifyJsPlugin()

It will remove all of your if statements with false condition.