Custom webpack config for environmental variables in Ionic v3

environment.dev.local.js

// Configuration for develpment build on local database
 
module.exports = {
	ENV: Object.freeze({
		prod: false,
		databaseUrl: 'http://localhost:1337/*******'
	})
}

environment.dev.remote.js

//Configuration for develpment build on remote database
 
module.exports = {
	ENV: Object.freeze({
		prod: false,
		databaseUrl: 'https://parseapi.back4app.com/'
	})
}

environment.prod.js

//Configuration for production build (on remote database)
 
module.exports = {
	ENV: Object.freeze({
		prod: false,
		databaseUrl: 'https://parseapi.back4app.com/'
	})
}

package.json

{
   "config": {
    "ionic_webpack": "./config/webpack.config.js",
    "local": true
  } 
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@app/env": [
        "config/env/environment.dev.remote.js"
      ]
    }
}

webpack.config.js

#!/usr/bin/env node
// Don't forget to use `npm run` so the package config variable is loaded.
const path = require('path');

// Add here the correct path to your env files
const envPath = './config/env'; // <- This is referenced from your project root
const PROD_FILE = 'environment.prod.js';
const DEV_FILE = 'environment.dev.remote.js';
const DEV_FILE_LOCAL = 'environment.dev.local.js';

let selectedEnvFile = PROD_FILE;
if (process.env.IONIC_ENV === 'dev') {
  selectedEnvFile = DEV_FILE;
  if (process.env.npm_package_config_local == 'true') {
    selectedEnvFile = DEV_FILE_LOCAL;
  }
}

console.warn(`\x1b[33mnpm_package_config_local=%o: Loading env vars from %o \n\x1b[0m`, process.env.npm_package_config_local, selectedEnvFile);

// Get default webpack configuration object
const useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js')[process.env.IONIC_ENV];
const envFile = path.resolve(`${envPath}/${selectedEnvFile}`);
const database = require(envFile).ENV.databaseUrl;

console.warn('\x1b[33m==> %s \n\x1b[0m', database);

// Add @app/env `resolve.alias`
module.exports = function () {
  useDefaultConfig.resolve.alias = {
    "@app/env": envFile
  };

  return useDefaultConfig;
};