Great article! Thanks for sharing!
Weikang
1

You are right. It seems a bit convoluted but the idea is that the webpack build process is part of the dev environment. Only the output or starting an SSR server should be part of production. I set them up in the following way (package.json):

"scripts": {
"dev": "NODE_ENV=development webpack-dev-server --hot --inline",
"build": "NODE_ENV=production webpack -p",
"test": "NODE_ENV=test karma start karma.conf.js"
}

Karma is a test runner for JS.

Using this setup, I can access the environment in webpack.config.js using something like this:

if (process.env.NODE_ENV === 'production') {
module.exports = productionConfig;
} else if (process.env.NODE_ENV === 'test') {
module.exports = testConfig;
} else if (process.env.NODE_ENV === development') {
module.exports = developmentConfig;
}

If I need to access the environmental variable from inside React application, I add it to webpack config in the following way:

"plugins": {
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: process.env.NODE_ENV
}
});
}
Show your support

Clapping shows how much you appreciated Gasim Gasimzada’s story.