How to use config variables and JS preprocessor

[grexican]

Not an issue, as much as it a tutorial for those wanting/needing to use config variables.

In my development.json I defined a variable "apiUrl": "https://api.test.com" In production it's "https://api.prod.com"

How do you use it?
In my popup.js file:

var api = '/* @echo api */';

I stumbled upon the solution through trial and error and reading the documentation at : https://www.npmjs.com/package/preprocess

That does var text = 'Hi, I am <!-- @echo USERNAME -->'; as an example. The syntax probably would have worked too, but I chose JS style block comment and it worked.