I have an AngularJS project that uses webpack for bundling, serving, and building - no task runner such as bower or gulp is used. I'd like to be able to set environment variables for things such as the REST API endpoints that I'll be consuming in local versus production, and then access those within my actual AngularJS project files, particularly inside controllers. What's the best way to define and pass these env variables into the project?
3
-
1webpack.github.io/docs/list-of-plugins.html#definepluginFelix Kling– Felix Kling2015-11-25 16:58:49 +00:00Commented Nov 25, 2015 at 16:58
-
Awesome, that did it, thanks.Daniel Bogart– Daniel Bogart2015-11-25 20:02:44 +00:00Commented Nov 25, 2015 at 20:02
-
Can you move that as an answer and accept it? Thanks.Juho Vepsäläinen– Juho Vepsäläinen2015-11-26 15:38:33 +00:00Commented Nov 26, 2015 at 15:38
Add a comment
|
1 Answer
The solution was to use Webpack's definePlugin to define free/global variables:
webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
3 Comments
hitautodestruct
How do you use this inside your code? It's just global using like
window.VERSION is in the browser?
dvdvck
They are used like if were macros in C, webpack replaces every occurrence with the value
Josef.B
@dvdvck Actually gave the missing second part of the accepted answer. Cause I searched for the globals and there are none in the runtime browser client. thx.