Environment Variables in an isomorphic JS app: Webpack find & replace?

Question

I\'m using webpack to bundle an isomorphic JS app (based on this example) so that the browser runs the same code as the server. Everything is running smoothly except I have

Answer 1

In your webpack.config.js, use the following preLoaders (or postLoaders),

  module: {
    preLoaders: [
      { test: /\.js$/, loader: "transform?envify" },
    ]
  }

Another way using the webpack.DefinePlugin:

plugins: [
    new DefinePlugin({
      'process.env': Object.keys(process.env).reduce(function(o, k) {
        o[k] = JSON.stringify(process.env[k]);
        return o;
      }, {})
    })
]

NOTE: The old method using envify-loader was deprecated:

DEPRECATED: use transform-loader + envify instead.