It is abundantly clear on how to pass ENV variables into the code when you create/build your webpack. See this existing thread: Passing environment-dependent variables in webpack
However, I'd like to know if there is a way to have the already webpacked/bundled .js code update the variables used based on what is read in the ENV vars without having to do another webpack/build using different ENV vars.
Scenario:
- Development build webpack.config build where:
new webpack.DefinePlugin({ 'APISECRET': JSON.stringify(process.env.APISECRET || 'mydevapisecretkey') }),
This creates webpacked files that picks up my development environment key and is hosted on a development environment web server. - Take these same exact files and move them to a production environment where APISECRET ENV on the hosted webserver has the production value present.
Problem: Now the bundled code still references the value present from the development environment even though there is a new value for the APISECRET ENV variable present on the host.
If this is not possible, it would be great to know if there are any alternative solutions. This is per 12 factor best practices: https://12factor.net/config