answer.md

@lovedota this is definitively possible with webpack if you use the tried and true AMD module specification as the output target in your webpack bundles. You will also need to treat each app as an external for each other app. For example, in the webpack configuration for each of your micro-apps:

module.exports = {
  output: {
    library: "app1", // for subsequent apps, change them to a different name
    libraryTarget: "amd"
  },
  ...
  externals: [
    /^app2$/, // include all other apps that this app may also depend upon
    /^app3$/
  ]
}

Given that configuration, when you generate a bundle, you'll get an AMD module that looks like:

define('app1', ['app2', 'app3'], function(app2, app3) {
  ...
});

Then use a module loader, something like SystemJS or RequireJS to load each application. You'll need to tell the module loader how app1, app2, and app3 actually map to a URL. Configuring that mapping with SystemJS would look something like:

SystemJS.config({
  map: {
    app1: 'https://your-sweet-cdn.com/app1.js',
    app2: 'https://your-sweet-cdn.com/app2.js',
    app3: 'https://your-sweet-cdn.com/app3.js'
  }
});

Then you can simply load your initial app by doing SystemJS.import('app1');. And then if app1 subsequently loads app2 or app3, SystemJS will properly load those dependencies and make them available.

While this is a lot of work to get up and running, we have built a variety of tools that make micro-services on the front-end a more enjoyable experience. Checkout the SystemJS plugin, sofe, which makes it easier to map micro-service names to fully qualified URLs. Another project, single-spa, makes it easier to have multiple SPAs dynamically load, unload, and be active on the same page at the same time.

blittle/answer.md