September 23, 2016

How to change webpack config between envirionments

How to change webpack config between environments?

When using React, the document says we have to set environment variable NODE_ENV to production. And I also want to use UglifyJsPlugin only on production build.

Note: by default, React will be in development mode. To use React in production mode, set the environment variable NODE_ENV to production (using envify or webpack’s DefinePlugin). A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.

https://facebook.github.io/react/downloads.html

Use process.env.NODE_ENV

I found a good example :-)

webpack issues#868

Then I can switch config using process.env.NODE_ENV.

Example

This is simple webpack.config.js to use React with ES2015.

Use

Then you can use like these

on development

./node_modules/webpack/bin/webpack.js --watch -d --progress --color

on production build

NODE_ENV=production ./node_modules/webpack/bin/webpack.js --progress --color

© Chu 2017