Kite webpack build processes

A configurable webpack process that can run apps locally using the webpack dev server and produce build versions of the app.

This is designed to be shared by a number of Kite apps which use Angular and follow a simliar structure.

The systems surrounding the webpack config are based on the react-dev-utils, https://www.npmjs.com/package/react-dev-utils This aims to log errors and warnings in a helpful way and reduce the noise from webpack.

Requirements

• Node v8+
• Npm v5+

Setup

• Install via npm

npm i --save-dev @kite-tech/webpack

• Add the build processes to the package.json

{
    "scripts": {
    "build:dev": "kite-tech-webpack:dev --partner-name=irista --project-config-location=kite-webpack-config.js",
    "build:dist": "concurrently \"npm run build:dist:irista\" \"npm run build:dist:canon\" \"npm run build:dist:kite\"",
    "build:dist:irista": "kite-tech-webpack:dist --partner-name=irista --project-config-location=kite-webpack-config.js",
    "build:dist:canon": "kite-tech-webpack:dist --partner-name=canon --project-config-location=kite-webpack-config.js",
    "build:dist:kite": "kite-tech-webpack:dist --partner-name=kite --project-config-location=kite-webpack-config.js",
    "start": "npm run build:dev"
    }
}

• Run the script you want

npm run build:dev

Passing arguments

Certain arguments can be passed to the scripts to configure them in the way you want.

You are able to pass the normal webpack CLI arguments and they should be applied to the dev server. E.g:

npm run build:dev -- --quiet=false

In addition to that there are a couple of other options that can be set.

npm run build:dev -- --disable-source-maps
npm run build:dev -- --verbose
npm run build:dev -- --disable-base64-images

• disable-source-maps will remove source maps completely.
• verbose will include more logging in the terminal.
• disable-base64-images will remove the loader that inlines smaller images as base64

You can also set some of these via environment vars. E.g you can run something like PARTNER_NAME=canon npm run build:dev to run the canon version of an app.

Configuring the build system

By default the config will be setup with some default paths which will allow projects using the standard structure we use to skip this section. But projects with different structures can configure their paths.

A project can pass paths to the build processes to define where certain elements are.

You should include the path to this file in the build.

node ./node_modules/@kite-tech/webpack/build/build.dev.js --partner-name=irista project-config-location=custom-project-config.js

This file should be in the below format where each path includes the full path to the app.

    module.exports = {
        paths?: {
            dir?: {
                appBuild?: string;
                appPublic?: string;
                appSrc?: string;
                appStyles?: string;
                appNodeModules?: string;
                appPreAngularStyles?: string;
                appKiteComponentsModule?: string;
            };
            files?: {
                appHtml?: string;
                appIndexJs?: string;
                appPackageJson?: string;
                appPreAngularScss?: string;
            };
            urls?: {
                publicUrl?: string;
                servedPath?: string;
            };
        };
        webpackOutput?: {
            path?: string;
            filename?: string;
            chunkFilename?: string;
        };
        webpackPlugins?: {
            development?: webpack.Plugin[];
            production?: webpack.Plugin[];
        };
    };

To get the full app path you can use the function at like so:

const appPathGenerator =
    require('@kite-tech/webpack/utils/app-path-generator');
const nodeModulesFullPath = appPathGenerator('node_modules');

The other part is the additional plugins that will be applied by Webpack.

Ahead of Time Compilation (AOT)

To have the application build in AOT mode you need to enable and set these variables:

process.env.NODE_ENV = 'production';
process.env.AOT_READY = 'true';

This will compile the typescript in the app using the @ngtools/webpack package.

Custom HTML for partners

Partner html can be included by adding code to files in the /assets/partner/{partnerName}/ directory of an app. These files are the index-head.html and the index-footer.html.

The index-head.html is dropped into the index.html where the <%= htmlWebpackPlugin.options.partnerHeadData %> line is.

The index-footer.html is dropped into the index.html where the <%= htmlWebpackPlugin.options.partnerFooterData %> line is.