Mastering Module Federation: A Hands‑On Guide to Micro‑Frontend Architecture

Module Federation (MF) is a Webpack 5 feature that enables multiple independent builds to form a single application without mutual dependencies, supporting micro‑frontend architectures.

Motivation Multiple separate builds should form a single application. These builds should not depend on each other, allowing independent development and deployment.

MF provides the ability to load remote applications at runtime. The two key roles are host (the app that consumes others) and remote (the app that is exposed).

Application Scenarios

Micro‑frontend composition: shared components and exposes allow multiple apps to be managed together.

Resource reuse and bundle size reduction: common libraries (e.g., lodash) can be deployed once and shared at runtime.

How to Use

Project structure:

module-home : homepage, displays a string.

module-layout : layout containing an HTML template.

module-lib : utility library exposing methods and sharing lodash.

Key webpack configurations:

plugins: [
    new ModuleFederationPlugin({
        name: 'lib',
        filename: 'remoteLib.js',
        library: { type: 'var', name: 'lib' },
        exposes: { './utils': './index.js' },
        shared: ['lodash']
    })
]

// module-home webpack config
plugins: [
    new ModuleFederationPlugin({
        name: 'home',
        filename: 'remoteHome.js',
        library: { type: 'var', name: 'home' },
        exposes: { './mount': './index.js' },
        shared: ['lodash']
    })
]

// module-layout webpack config
plugins: [
    new ModuleFederationPlugin({
        name: 'main',
        filename: 'remoteMain.js',
        remotes: {
            lib: 'lib@http://localhost:3001/remoteLib.js',
            home: 'home@http://localhost:3003/remoteHome.js'
        },
        shared: ['lodash']
    }),
    new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html'), inject: 'body' })
]

Runtime code (boot.js) imports utilities from the remote lib and the mount function from the remote home, then executes them:

import { getUid, setUid } from 'lib/utils';
import { mount } from 'home/mount';
import _ from 'lodash';
setUid();
console.log(getUid());
console.log(_.get);
mount();

The layout displays the mounted node from home, and the console logs confirm that the shared lodash instance is loaded only once.

Further analysis of the generated remoteLib bundle shows how Module Federation creates a container with moduleMap, get, and init functions to expose modules and handle shared‑scope initialization.

Further Learning

Explore the open‑source project https://github.com/yuzhanglong/mf-lite for a complete micro‑frontend solution based on Webpack 5 Module Federation.

References include articles on building micro frontends with Module Federation and deep dives into its internals.