Webpack：-p vs NODE_ENV =生产vs process.env.NODE_ENV

Question

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 1

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.

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.

EDIT : It's actually DefinePlugin that should be used for this purpose.

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

Answer 2

Based on webpack documentation setting webpack -p performs following

• Minification using UglifyJSPlugin
• Runs the LoaderOptionsPlugin
• Sets the Node environment variable

So instead of doing:

"scripts": {
  "dist": "NODE_ENV=production webpack",
  "start": "webpack"
}

You can just specify

"scripts": {
  "dist": "webpack -p",
  "start": "webpack"
}