To specify those configurations, you can store them in an object that can be accessed through the externals parameter in webpack.config.js.
The externals parameter allows you to exclude dependencies from the output bundles. Instead, the generated bundle relies on the presence of that dependency in the consumer's environment.
For instance:
externals: {
appSettings: "appSettings",
"window.appSettings": "appSettings"
}
Here, appSettings is a global variable that holds the desired environment variables.
Alternatively, if you prefer to avoid exposing the settings in the global object, you can follow this approach:
Define a variable with the default settings, which will be bundled with webpack.
export var appSettings = {
currentSettings: "",
settings: {},
getString: function(strName) {
var sett = this.currentSettings ?
this.settings[this.currentSettings] :
appDefaultStrings;
if (!sett || !sett[strName]) sett = appDefaultStrings;
return sett[strName];
},
getSettings: function() {
var res = [];
res.push("");
for (var key in this.settings) {
res.push(key);
}
res.sort();
return res;
}
};
export var appDefaultStrings = {
apiURL: "//localhost/app/server/API"
//...
}
appSettings.settings["default"] = appDefaultStrings;
You can then import this variable and utilize it like so:
import appSettings from "../path/to/appSettings";
appSettings.getString("apiURL"); //"//localhost/app/server/API"
Once you have your default settings set, you can create another file for custom settings.
import appSettings from "../path/to/appSettings";
export var appProductionSettings = {
apiUrl: "http://example.com"
//...
}
appSettings.settings["production"] = appProductionSettings;
Lastly, determine which settings you want to use. If you're unfamiliar with vue.js, here's a guide to get you started:
import appSettings from "../path/to/appSettings";
export class MyApp {
constructor() {
this.settingsValue = "";
}
get settings() {
return this.settingsValue;
}
set settings(value) {
this.settingsValue = value;
appSettings.currentSettings = value;
}
}
Change the settings accordingly:
import "../path/to/productionSettings";
var app = new MyApp();
app.settings = "production";
This method allows you to create and utilize multiple settings files as needed.