Change hard coded url constants for different environments via webpack

Question

I have a ApiCaller.js module which generate calls to our api server to get data. It has const field API_URL which points to server url. This

Answer 1

You could set the define plugin to define a PRODUCTION variable as follows (or alternatively to true if you use different configuration files for the builds):

new webpack.DefinePlugin({
    PRODUCTION: process.env.NODE_ENV === 'production'
})

Then in your code you will write something like:

var API_URL = PRODUCTION ? 'my-production-url' : 'my-development-url';

During compilation webpack will replace PRODUCTION with its value (so either true or false), and this should allow UglifyJS to minify our expression:

var API_URL =  ? 'my-production-url' : 'my-development-url';

The worst case scenario is uglify not being able to minify the conditional expression leaving it as is.