Ionic 2 Add Custom build script

Ionic Framework ionic-v3
1

In my previous application we added grunt.registerTask(‘auth’) so it will authenticate user when user run grunt command so other API will work which need authentication same i want to do in Ionic project.

Is anyone know how to achieve in ionic?

2

You need to edit package.json and add this:

  "config": {
    "ionic_webpack": "./src/config/webpack.config.js"
  }

And then create this file inside src/config
webpack.config.js (Here is my file, just to show what is possible to do with it)

/**
* 
* IMPORTANT!!!
* FOR 'HML' BUILD PLEASE CHANGE HOMOLOGATION VARIABLE TO true INSIDE .env FILE
*
*/
require('dotenv').config();

const execSync = require('child_process').execSync,
      path = require('path'),
      // Extend ionic webpack default build file to overwrite or add some properties
      useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

const hml = process.env.HOMOLOGATION === true || process.env.HOMOLOGATION === 'true',
      isWindows = /^win/.test(process.platform),
      prod = process.env.IONIC_ENV === 'prod',
      env = process.env.IONIC_ENV;

let alreadyInProgress = false;

module.exports = () => {
    if (alreadyInProgress) {
        return;
    }

    alreadyInProgress = true;

    /* GENERATE ICON FOR ENVIRONMENT ONLY IF NOT ionic serve */
    if (process.argv.indexOf('--address') === -1 || process.argv.indexOf('--nobrowser') === -1) {
        let commands = null;
        const bar = isWindows ? '\\' : "/";
        const cpCommand = isWindows ? 'copy' : 'cp';
        const fileAndroid = `icons${bar}android${bar}icon-` + (hml ? 'hml' : env) + '.png';
        const fileIos = `icons${bar}ios${bar}icon-` + (hml ? 'hml' : env) + '.png';

        // COPY ICON
        let copyAndroidCommand = `${cpCommand}${isWindows ? '' : ' -f'} ${fileAndroid} resources${bar}android${bar}icon.png${isWindows ? ' /Y' : ''}`;
        let copyIosCommand = `${cpCommand}${isWindows ? '' : ' -f'} ${fileIos} resources${bar}ios${bar}icon.png${isWindows ? ' /Y' : ''}`;
        let resourcesCommand = 'ionic cordova resources --force';

        let now = new Date();
        let time = `[${now.getHours() < 10 ? '0' + now.getHours() : now.getHours()}:${now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()}:${now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()}]`;

        console.log(`${time}  copying Android icon: ${copyAndroidCommand}`);
        execSync(copyAndroidCommand);

        console.log(`${time}  copying iOS icon: ${copyIosCommand}`);
        execSync(copyIosCommand);

        console.log(`${time}  generating resources: ${resourcesCommand}`);
        execSync(resourcesCommand);
    }
    /* END OF GENERATE ICON FOR ENVIRONMENT */

    /* PLATFORM CHECKS */
    let now2 = new Date();
    let time2 = `[${now2.getHours() < 10 ? '0' + now2.getHours() : now2.getHours()}:${now2.getMinutes() < 10 ? '0' + now2.getMinutes() : now2.getMinutes()}:${now2.getSeconds() < 10 ? '0' + now2.getSeconds() : now2.getSeconds()}]`;

    if (hml) {
        console.log(`${time2}  building for "HOMOLOGATION"`);
        useDefaultConfig.dev.resolve.alias = {
            "@app/config": path.resolve('./src/config/environment.hml.ts')
        };

        useDefaultConfig.prod.resolve.alias = {
            "@app/config": path.resolve('./src/config/environment.hml.ts')
        };

    } else {
        let finalEnv = env === 'prod' ? 'PRODUCTION' : 'DEVELOPMENT';

        console.log(`${time2}  building for "${finalEnv}"`);
        // IONIC ONLY PROVIDE dev OR prod
        useDefaultConfig.dev.resolve.alias = {
            "@app/config": path.resolve(`./src/config/environment.${env}.ts`)
        };

        useDefaultConfig.prod.resolve.alias = {
            "@app/config": path.resolve(`./src/config/environment.${env}.ts`)
        };
    }

    return useDefaultConfig;
}