Use NODE_ENV in source code to control build process with Webpack

Question

I am setting up Redux DevTools (https://www.npmjs.com/package/redux-devtools) in my project and want to exclude the DevTools when building my project for production. The documentation says that this can be accomplished by using this code:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

I already have a module with constants so I have put the checking for the NODE_ENV in there.

Constants.PRODUCTION = process.env.NODE_ENV === 'production'

In my Webpack config file I have the following code that works like it should:

const production = process.env.NODE_ENV === 'production'

var config = {
  // configuration goes here
}

if (production) {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ].concat(config.plugins)
}

When running set NODE_ENV=production&&webpack the build get's minified and using just webpack dosen't minify the build. However, in the source code itself the NODE_ENV is undefined:

console.log(process.env.NODE_ENV) // Output: Undefined

If I set my Constants.PRODUCTION to true then DevTools is not included in the build. Somehow I am supposed to use DefinePlugin or ProvidePlugin (the Redux DevTools documentation mention them both but on different places), but I can't figure out how. I am using Windows 10, DevTools 3.0.0 and npm scripts to run the build process. Can anyone help me with how I'm supposed to set up DefinePlugin or ProvidePlugin in my webpack config file?

score 3 · Accepted Answer · answered Dec 27 '15 at 11:42

3

I solved it by myself; in the webpack config file I added this:

plugins: [
  // Some other plugins
  new webpack.DefinePlugin({
      PRODUCTION: production,
  })
]

I changed the code in my Constants module to

Constants.PRODUCTION = PRODUCTION

and that works. Now when running my npm scripts I got one build without the modules since that is removed completely during uglifying and I can start webpack dev server as before and then I have Redux DevTools loaded:

"scripts": {
  "start": "set NODE_ENV=development&&webpack-dev-server",
  "build": "set NODE_ENV=production&&webpack --progress --colors"
}

The first code snippet in the question now looks like this:

if (Constants.PRODUCTION) {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

answered Dec 27 '15 at 11:42

Oskar

1,996
1
22
39

Hi @Oskar. I have exactly the same situation. I am trying to follow your answer, but something doesn't add up. Can you please provide some more details, i.e., how did you define the `production` variable. Thanks. – Mihai Jan 17 '17 at 06:51
Hi @F.Gran! I have some more info in the question, the `production` variable is set with `const production = process.env.NODE_ENV === 'production'`. Let me know if you need some more help and hopefully I can add some more details to the answer! – Oskar Jan 17 '17 at 07:48
Thanks, @Osakr. I will put everything together again and see if it works. If it doesn't, and you don't mind, I'll write back to you providing specific details of my config file. I really appreciate your help! – Mihai Jan 17 '17 at 07:55
No worries @F.Gran, I have the complete `webpack.config.js` [here](https://github.com/OskarKlintrot/Offline-First-React-And-Redux-Boilerplate/blob/master/webpack.config.js). – Oskar Jan 17 '17 at 08:56
@Osakr, I still can't get it to work. I've tried all day and I decided to start a question on this. I tried your code from GitHub, but I have the same problem. I would appreiciate if you can check it out [here](http://stackoverflow.com/questions/41705888/passing-the-node-env-value-using-webpack-via-defineplugin). – Mihai Jan 17 '17 at 20:03
@F.Gran, sorry I forgot that I actually uses flags (which is cross plattform) in the finished config and not `NODE_ENV` which can be a mess to get working cross plattform. You can see that in the [`package.json` file](https://github.com/OskarKlintrot/Offline-First-React-And-Redux-Boilerplate/blob/master/package.json#L11). – Oskar Jan 18 '17 at 07:31

score 0 · Answer 2 · answered Apr 09 '17 at 07:01

Based on webpack documentation. Setting webpack -p will do the following

Minification using UglifyJSPlugin
Runs the LoaderOptionsPlugin
Sets the Node environment variable

So instead of manually setting NODE_ENV all you need to do is to set -p flag. Something like this

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack -p --progress --colors"
}

Use NODE_ENV in source code to control build process with Webpack

2 Answers2

Linked