Multiple Parallel Builds In Webpack

October 23, 2016

Recently, I was in charge of building a javascript library that will interact with AWS Firehose SDK. I decided to use Webpack as my build system due to my familiarity of it, it’s simplicity and ease of use.

The library together with AWS Firehose SDK are going to be loaded asynchronously on the customer’s existing website. Thus, I have a separate js file that handles asynchronous loading called script_loader.js.

This is how my main lib folder looks like:

My build folder will look like this after a successful build.

Based from the screenshot above, I will have 3 output js files.

A. aaxon_lib_tracker.js - js file that contains the main library. The library name is called AAXON.

//example of sending data to Firehose using the library
var trackedObj = { //some valid JSON data };
AAXON.sendData(trackedObj);

B. aaxon_sript_tracker.js - js file that contains the script for asynchronously loading the main library together with the AWS Firehose SDK. The library name is initAaxonTracker.

    //the library exposes only a single function
    initAaxonTracker(function(){
        //main library and AWS Firehose SDK is now available
        console.log(AWS); //the AWS Firehose SDK
        console.log(AAXON); //the main library                 
    });

C. test.js - js file that contains the unit tests for the main library, AAXON.

Basically, my main requirement here is to build 2 separate javascript libraries in parallel, AAXON and initAaxonTracker. To do this, my Webpack configuration should look something like this.

 var entryA, //files to build for first library
     entryB, //files to build for second library
     outputA, //build output for first library
     outputB; //build output for second library

var webpackConfigA = {
    devtool: 'inline-source-map',
    entry: entryA,
    output: outputA,
    plugins: [new webpack.optimize.UglifyJsPlugin()]
};

//second library
var webpackConfigB = {
    entry: entryB,
    output: outputB,
    plugins: [new webpack.optimize.UglifyJsPlugin()]
};

module.exports = [webpackConfigA, webpackConfigB];

Mulitple builds in parallel is possible by installing parallel-webpack.

To install:

 npm install parallel-webpack --save-dev

My final Webpack configuration (webpack.config.js) looks like this:

var path = require("path"),
    webpackConfigA,
    webpackConfigB,
    WebpackStrip = require('strip-loader'),
    webpack = require("webpack"),
    glob = require("glob"),   
    clean = process.argv.indexOf('--clean') !== -1,

    //AAXON Library
    entryA = {
        test: glob.sync("./lib/tests/*spec.js"),
        aaxon_lib_tracker: [
            './lib/main.js'
        ]
    },
    outputA = {
        filename: '[name].js',
        path: path.resolve(__dirname, "build"),
        publicPath: '/build',
        library: "AAXON",
        libraryTarget: 'var',
        umdNamedDefine: true
    },

    //initAaxonTracker Library
    entryB = {
        aaxon_script_loader: [
            './lib/script_loader.js'
        ]
    },    
    outputB = {
        library: 'initAaxonTracker',
        filename: '[name].js',
        path: path.resolve(__dirname, "build"),
        publicPath: '/build',
        libraryTarget: 'var',
        umdNamedDefine: true
    };

webpackConfigA = {
    devtool: 'inline-source-map',
    entry: entryA,
    output: outputA,
    plugins: [new webpack.optimize.UglifyJsPlugin()]
};

webpackConfigB = {
    entry: entryB,
    output: outputB,
    plugins: [new webpack.optimize.UglifyJsPlugin()]
};


if (clean) {
    webpackConfigA.module = {
        loaders: [
            { test: /\.js$/, loader: WebpackStrip.loader('debug', 'console.log') }
        ]
    };
    webpackConfigB.module = {
        loaders: [
            { test: /\.js$/, loader: WebpackStrip.loader('debug', 'console.log') }
        ]
    };
}


module.exports = [webpackConfigA, webpackConfigB];