Unlock Micro‑Frontend Power: How Module Federation Simplifies Shared Modules

This article explains the concept of Module Federation (MF), a Webpack feature that enables decentralized module sharing across independent builds, often used for micro‑frontend architectures.

What Is Module Federation (MF)?

Motivation Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually. This is often known as Micro‑Frontends, but is not limited to that.

In plain terms, MF allows an application to load modules from other applications hosted on different servers at runtime. The two key concepts are:

host : an application that consumes modules from others.

remote : an application that exposes modules for others to use.

Application Scenarios

Micro‑frontend : Use shared and exposes to integrate multiple applications into a single UI.

Resource reuse and bundle size reduction : Deploy common components as separate modules and load them at runtime, avoiding duplicate code in each bundle.

How to Use Module Federation

The project structure consists of three modules:

module-home : the home page, displays a simple string in the layout.

module-layout : the layout, contains only an HTML template.

module-lib : exposes utility functions and shares the lodash library.

Below are the essential Webpack configuration snippets for each module.

<code>// apps/module-lib/webpack.config.js
plugins: [
    new ModuleFederationPlugin({
        name: 'lib',
        filename: 'remoteLib.js',
        library: { type: 'var', name: 'lib' },
        exposes: {
            './utils': './index.js', // expose utility methods
        },
        shared: ["lodash"]
    })
]

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

// apps/module-layout/webpack.config.js
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'
    })
]

// apps/module-layout/boot.js
import { getUid, setUid } from 'lib/utils' // use methods exposed by module-lib
import { mount } from 'home/mount' // use mount method exposed by module-home
import _ from 'lodash'

setUid();
setUid();
console.log(getUid());
console.log(_.get);

mount();
</code>

The layout displays the node mounted by home , logs output from lib , and shares a single instance of lodash across all modules.

Further Learning

Explore the open‑source project mf-lite , which provides an elegant and practical micro‑frontend solution based on Webpack 5 Module Federation.

References

How to Build a Micro Frontend with Webpack's Module Federation Plugin

Webpack 新功能 Module Federation 深入解析

基于 Webpack Module Federation，这可能是一个比较优雅的微前端解决方案

探索 webpack5 新特性 Module federation 在腾讯文档的应用

Module Federation原理剖析