Webpack Module Federation

February 12, 2025

With the rise of micro frontends, managing shared dependencies and dynamically loading modules across applications has become a significant challenge. Webpack Module Federation, introduced in Webpack 5, offers a solution for building applications by enabling multiple JavaScript applications to share and consume modules dynamically at runtime.

Module Federation is a feature in Webpack that allows independent applications to share code without requiring each application to bundle the same dependencies. This makes it possible to split applications into smaller, maintainable units. Following are some key features of module federation

Runtime Module Sharing: Applications can load shared modules dynamically without bundling them.
Reduced Bundle Size: Since dependencies are shared, there’s no need to duplicate them across applications.
Independent Deployment: Different teams can develop and deploy micro frontends independently.
Improved Performance: By avoiding redundant downloads, applications load faster.

Setting Up Webpack Module Federation

Let’s walk through a setup where two applications share modules: a host application and a remote application.

Step 1: Install Dependencies

Ensure you have Webpack 5 installed in both projects:

npm install webpack webpack-cli webpack-dev-server --save-dev

Step 2: Configure Webpack in the Remote Application

The remote application provides modules to be consumed by other applications.


const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
  entry: "./src/index",
  mode: "development",
  output: {
    publicPath: "http://localhost:3001/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "remoteApp",
      filename: "remoteEntry.js",
      exposes: {
        "./RemoteComponent": "./src/components/RemoteComponent",
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

Step 3: Configure Webpack in the Host Application

The host application will consume the remote module.

const { ModuleFederationPlugin } = require("webpack").container;
module.exports = {
  entry: "./src/index",
  mode: "development",
  output: {
    publicPath: "http://localhost:3000/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "hostApp",
      remotes: {
        remoteApp: "remoteApp@http://localhost:3001/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

Step 4: Use the Shared Module in the Host Application

Now, the host app can dynamically import the RemoteComponent component from the remote app.


import React, { Suspense } from "react";
const RemoteComponent = React.lazy(() => import("remoteApp/RemoteComponent"));

function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <RemoteComponent />
      </Suspense>
    </div>
  );
}

export default App;

Step 5: Start the Applications

Run both applications on different ports:

# Start the remote application
npm start -- --port 3001

# Start the host application
npm start -- --port 3000

Let's code