Webpack has always been this big mystery tool that does magic that I lean on. Tried a couple times to unravel the magic without success. Having a well written CLI from Vue that beautifully stitches all the build/ testing/ linting tools together didn't help.

I chanced upon this series of articles detailing steps to build Vue and Webpack from the ground up. It was an easier read than previous, and got me taking another stab into the Webpack magic again. This time, I made more progress than I dreamt to accomplish!

A distributed way to build Single Page Application (SPA) UI

This repo details my early successes at enabling complex, parallel web UI development not unlike what I observed in my days in Amazon and Citi. In summary: web UI teams (each owning a part of the overall app experience) should be able to update code owned by their team, and deploy to production with minimal cross-team dependencies. Specifically, they should be able to build and deploy their own code bundles, and the app will automatically consume the changes.

The following details key Webpack configurations that support the goal.

Bundle to Universal Module Definition (UMD)

Webpack can compile javascript into UMD files that can be consumed dynamically from the main app. Sample code:

// webpack.config.js for external module
module.exports = {
    ...
    output: {
        ...
        libraryTarget: 'umd' 
    }
}

// webpack.config.js for main app
module.exports = {
    ...
    externals: {
        corelib: 'CoreLib'
    }
}

This is how one writes a Webpack index file wrapping code as a module:

import dayjs from 'dayjs'
import axios from 'axios'

export const CoreLib = {
  dayjs, axios
}

This is how a module is consumed from the main app:

import { dayjs } from 'corelib' // corelib is the module name

Dynamic routing

This is more Vue than Webpack, and is important to mention here as a critical supporting tool. Programmatic route registration in Vue routing makes it really easy to update routing/ route handling. Here's my rough implementation:

// LoadApp.vue: dynamically loads remote code bundle. Bundle includes function
// to register routes via $router.addRoutes()
<template>
    <div>
        Loading app...
    </div>
</template>

<script>
    export default {
        name: 'app',
        data: () => {
            return {

            }
        },
        mounted: function () {
            console.log('Loading subapp')
            // Google numerious examples to dynamically load scripts without
            // using Ajax. Example: https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js
            return loadScript('http://otherteam.app.com/otherteam-bundle.js')
                .then(() => {
                    let url = SubappLib.RegisterRoutes(this.$router)
                    this.$router.replace({name: url})
                })
        },
        computed: {}
    }
</script>

Follow instructions on official Vue Router site for more sample code on programmatic route registration.

export default function RegisterRoutes(router) {
    router.addRoutes([{
            path: '/home',
            name: 'HomeHome',
            component: Home,
            beforeEnter: (to, from, next) => {
                console.log(to)
            }
        },
        {
            path: '/home/page2',
            name: 'HomePage2',
            component: Page2
        }
    ])
    return 'HomeHome'
}

If you really want to know loadScript:

function loadScript(url) {
    return new Promise((resolve, reject) => {
        let el = document.createElement('script')
        el.src = url
        el.onload = () => {
            console.log('script loaded OK')
            resolve()
        }
        el.onerror = (err) => {
            console.log(err);
            reject();
        }
        document.body.appendChild(el)
    })
}

Other considerations

Web UI teams should include in their bundle the following:

Collection of Vue components to be loaded at runtime
Route registration (should be a function)
Store registration (should be a Vuex module)
Some thinking about what should go into the Core bundle (the dependency bundle every team will need), the Main bundle ('platform' code governing the major components used by SubApp teams), and SubApp bundle (code localized to a specific part of the app)

To be learnt

Here are some of the Known Unknowns I have yet to delve into: