0

I am currently using Webpack with Angular and I would like to inject/use variables depending on weather it is development or production.

I have Webpack already setup for this to detect if prod or dev but I am having a problem sending variables to JavaScript / Angular.

I thought initially the solution was using DefinePlugin but this isn't available as a global variable in JavaScript / Angular.

  new webpack.DefinePlugin({
    API_URL: JSON.stringify('testing')
  }),

Does anyone know a solution to this? I just really need to send in variables or files to angular depending weather its production or development. An example is the use of a API backend base url. It's different in development to production.

Commenting lines out seems such a bad idea if there is some way of supporting this in an automated way.

As I say, I already have a variable in Webpack to decided if its production or dev but just having an issue telling Angular / JavaScript. Any ideas?

halfer
  • 19,824
  • 17
  • 99
  • 186
Martin
  • 23,844
  • 55
  • 201
  • 327
  • 1
    `API_URL` should be available globally, have a look at http://stackoverflow.com/questions/34479372/use-node-env-in-source-code-to-control-build-process-with-webpack – Oskar Sep 19 '16 at 08:56
  • 1
    You have to realize that `DefinePlugin` works at _compile_ time. In other words, it will replace occurrences of `API_URL` in your code to its defined value when it gets bundled. So it'll only be available for code that gets processed by Webpack. – robertklep Sep 19 '16 at 08:58
  • Ah yes so it is. Thanks – Martin Sep 19 '16 at 10:15

1 Answers1

1

I just tested the DefinePlugin following the example in the docs. It seems to work for me. Maybe checkout updating your webpack and DefinePlugin version?

If you use a transpiler like babel you can also inject environment variables using the inline environment variables transform.

joerideg
  • 1,818
  • 1
  • 15
  • 18