An Overview of Module Federation

Webpack is a widely used front‑end bundler, and its new feature in version 5, Module Federation, enables dynamic sharing of modules across separate applications without rebuilding the consumer projects. This article walks through a small practical example to help readers become familiar with its usage.

Business Scenario

When a company has a shared component library that needs to be upgraded across many business lines, using Module Federation allows the upgrade to happen by only updating the base library, avoiding the need to rebuild each consumer project. Unlike the traditional npm publishing approach, which requires rebuilding and redeploying each consumer after a version bump, Module Federation provides real‑time dynamic updates.

The example project consists of two Vue 3 applications: app-exposes (the remote) and app-general (the host). The remote exposes a SearchItem and a SpecialItem component, which the host consumes on its home page. The remote also provides an AboutView page that the host imports directly.

Directory Structure (Key Parts)

├── README.md
├── app-exposes
│   ├── babel.config.js
│   ├── src
│   │   ├── App.vue
│   │   ├── components
│   │   │   ├── SearchItem.vue  --- search component
│   │   │   └── SpecialItem.vue  --- custom business component
│   │   ├── index.ts
│   │   ├── main.ts
│   │   ├── router
│   │   │   └── index.ts
│   │   └── views
│   │       ├── AboutView.vue   --- about page
│   │       └── HomeView.vue    --- home page
│   ├── tsconfig.json
│   └── vue.config.js
├── app-general
│   ├── babel.config.js
│   ├── src
│   │   ├── router
│   │   │   └── index.ts
│   │   └── views
│   │       └── HomeView.vue
│   ├── tsconfig.json
│   └── vue.config.js

After cloning the repository, run npm i in both project folders and start them with npm run serve . The two services run on ports 8083 (app‑exposes) and 8081 (app‑general).

Configuration Files

The remote ( app-exposes ) uses ModuleFederationPlugin to expose its components:

The host ( app-general ) configures the remote entry:

Both projects rely on the native Webpack ModuleFederationPlugin to achieve the federation effect.

Module Federation Plugin Structure and Hook Usage

Webpack’s compilation process consists of three phases: initialization, building, and emitting. Plugins hook into these phases via the Tapable library. The ModuleFederationPlugin is a class with an apply method that registers hooks such as afterPlugins to inject its own logic.

class ModuleFederationPlugin {
  apply(compiler) {
    compiler.hooks.afterPlugins.tap("ModuleFederationPlugin", () => {
      // ... plugin logic ...
    });
  }
}

It uses various Tapable hook types (e.g., SyncHook , AsyncSeriesHook ) to integrate with Webpack’s pipeline.

Underlying Principles

Webpack bundles all modules inside an immediately‑invoked function expression (IIFE) that defines a webpack_modules object and a webpack_require function. For asynchronous loading, Webpack injects a global webpackChunk array whose push method merges newly loaded chunks into the module registry.

Module Federation modifies the webpack_require implementation so that when a remote module is requested, the code is fetched from a remote entry point, cached on window["webpackChunk" + appName] , and then merged into the local webpack_modules collection.

Plugin Core Logic

The plugin’s apply method performs three main actions based on configuration:

If shared is defined, it adds the SharePlugin to handle shared dependencies.

If exposes is defined, it adds the ContainerPlugin to expose local modules.

If remotes is defined, it adds the ContainerReferencePlugin to consume remote modules.

class ModuleFederationPlugin {
  apply(compiler) {
    if (options.exposes) {
      new ContainerPlugin({ ... }).apply(compiler);
    }
    if (options.remotes) {
      new ContainerReferencePlugin({ remoteType, remotes: options.remotes }).apply(compiler);
    }
    if (options.shared) {
      new SharePlugin({ shared: options.shared, shareScope: options.shareScope }).apply(compiler);
    }
  }
}

Runtime Flow in Webpack 5

Download and execute remoteEntry.js , which registers init and get functions on window[appName] .

When the host imports a remote component, it calls app-exposes.get(moduleName) , which triggers a JSONP request.

The fetched chunk is stored in window["webpackChunk" + appName] and merged into the local module registry.

webpack_require then resolves the module and executes the consumer’s callback.

Use Cases

Module Federation is widely used in micro‑frontend architectures to share code across applications without redeployment. It also enables building a low‑code platform at the app level, allowing shared services such as SSO, routing, analytics, and error handling to be abstracted into reusable modules.

Summary

Basic concepts of Module Federation.

Common configuration items (exposes, remotes, shared).

Step‑by‑step setup of a simple demo project.

Underlying principles of how the plugin integrates with Webpack’s compilation and runtime.

References

Webpack 5 official documentation – Module Federation.

Various community articles and deep‑dive blogs on Module Federation.