Webpack Module Federation

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 seamless solution for building distributed applications by enabling multiple JavaScript applications to share and consume modules dynamically at runtime.

Module Federation is a feature in Webpack 5 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 simple 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

Benefits of Using Webpack Module Federation

1. Scalability: Teams can develop and deploy micro frontends independently.
2. Performance Optimization: Reduces redundant downloads, improving load times.
3. Seamless Upgrades: Applications can use different versions of shared dependencies without conflicts.
4. Code Reusability: Modules can be reused across multiple applications without duplication.

Conclusion

Webpack Module Federation is a powerful feature for building scalable micro frontend architectures. By enabling independent module sharing at runtime, it simplifies code reuse, reduces bundle size, and improves overall application performance. Start leveraging Module Federation today to create modular, scalable, and efficient web applications!