'externally supplied build-specific variables in output bundle for webpack 5/babel/TS web projects

I am finding it impossible to understand what the recommended setup for the following situation is:

I am developing an open source web application with webpack 5, babel and TS that can connect to external services that need api keys. These keys are obviously not "secret" (anyone who gets even obfuscated JS could find them) but also have no place being in an open source repo as they are specific to the install (and platform).

After many, many hours wading through DefinePlugin, EnvironmentPlugin and Dotenv documentation and trial and error, it is still not clear whether this is actually "supported" for the web environment. Nothing seems to work in any case.

So in a nutshell, is there a recommended, supported way to get "private" values from a file that is not best placed in git (so like .env and NOT like package.json, webconfig.js, etc.) for webpack 5 for a web environment replaced in the final output bundle?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source