Stephen Last Stephen Last - 29 days ago 15
Javascript Question

Webpack: -p vs NODE_ENV=production vs process.env.NODE_ENV

I'm having an issue with webpack in production and I'm getting confused with the different ways of running webpack in the production environment (I'm using Windows).

Can someone explain the difference between these:

One: CLI


  • webpack -p



Two: CLI


  • SET NODE_ENV=production

  • webpack



Three: webpack.config.js

new webpack.ProvidePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})


I'm using React and need to build a production version which is both minified and includes the production version of React.

Answer

SET NODE_ENV=production sets NODE_ENV environment variable to "production" on the server. The machine that compiles and bundles your javascript source files. So it can for example select a different webpack config file for production.

But this enviroment variable has no effect when this javascript code actually runs. Because the javascript code will run on a browser in a different machine. Thats where the providePlugin helps.

The providePlugin helps to set NODE_ENV variable in the browser. Where your javascript actually runs. Actually what it really does is replacing occurences of process.env.NODE_ENV with "production" rather than setting a variable. But effects are same.

Weback -p advertises to doing the second of above but seems to have some issues.