Best way to pass variables through Webpack?

[louisscruz]

Simple question, but I'm a little lost with the way webpack.DefinePlugin interacts with the application.

For my http calls, I'd like to have a variable that is dynamic based on the process.env.ENV. What's the best way to define a variable in both my webpack.config.js and webpack.prod.config.js files? And what's the best way to make them global variables in the application?

[rbao]

Not sure if this is the best way, but here is how I do it in both webpack.config.js and webpack.prod.config.js:

new webpack.DefinePlugin({
  'process.env': {
    'ENV': JSON.stringify(metadata.ENV),
    'NODE_ENV': JSON.stringify(metadata.ENV),
    'HMR': HMR,
    'API_URL': JSON.stringify(process.env.API_URL)
  }
})

Then you can just use it in the code

this._http.get(process.env.API_URL, options);

For development I use dotenv to set the environment variable.
For production just set environment variable as usual.

[louisscruz]

Perfect. Thanks!

[PatrickJS]

@rbao is correct. @rbao can you make a wiki page to talk briefly about this https://github.com/AngularClass/angular2-webpack-starter/wiki

[jshamley]

Don't forget to restart Webpack after adding the environment variables or the system won't recognize them.

[marek1]

I did all those things mentioned above, but

when running npm start i get a process object that contains an EMPTY env object

[herr-bubu]

I do it like this:

new webpack.DefinePlugin({
     XMPP_HOST: JSON.stringify(process.env.XMPP_HOST || "http://localhost"),
    XMPP_PORT: JSON.stringify(process.env.XMPP_PORT || 5280)
})

and then in JS:

export const XMPP_SERVER_URL = `${XMPP_HOST}:${XMPP_PORT}/http-bind`;

[Remco75]

@marek1 I noticed the same, there is a strange behaviour: When I de console.log(process) there is an empty env object .

When I do console.log(process.env) it is filled with the proper stuff. I think it has to do with the string 'process.env' we set in the DefinePlugin

[nmccready]

@Remco75

@marek1 I noticed the same, there is a strange behaviour: When I de console.log(process) there is an empty env object .

This strange behavior becomes clear when you look at the packed webpack file. Basically process does not get added to the global scope what so ever. Webpack does a search and replace for anything that is process.env and fills it in with that object specifically everywhere. So essentially it is a new instance of that config object every time. I think this was to not pollute the global space, but for minify purposes seems like a waste.

Is there a option to make it part of the global namespace?

Example:

new webpack.DefinePlugin({
  '__PROCESS__': {
    'ENV': 'production',
  }
})

client code (source mapped):

if(__PROCESS__.ENV === 'production'){
//do something
}

Real Packed Code:

client code (packed):

if(({"ENV":"production"}).ENV === 'production'){
//do something
}

It is not what you assumed it was

window.__PROCESS__ = {"ENV":"production"};

[nmccready]

Also this is talked about in some detail here webpack/webpack#868

To get this working a little nicer for consuming your config objects I wrote this:

function packinize(obj){
  _.each(obj, (v, i) => {
    if(_.isString(v))
      obj[i] = JSON.stringify(v)
    else if(_.isObject(v) && !_.isFunction(v))
      packinize(v)
  })
  return obj
}

const configPlugin = new webpack.DefinePlugin({
  __CONFIG__: packinize(frontendConfig)
})

[jianghai]

So, how could I do if __LANG__ is not defined by DefinePlugin ? Like this

const module = __LANG__ ? require('./' + __LANG__) : require('./zh-cn')

[HendrikRoth]

Why not just this?

new webpack.DefinePlugin({
  'process.env': process.env
})

Is @jianghai 's method possible? None of these instructions are clear with the use of TypeScript.