Module Federation in Webpack

Introduction

Module Federation is a feature in Webpack 5 that allows multiple Webpack builds to work together. It enables the sharing of code between applications at runtime, facilitating micro-frontend architectures.

Key Concepts

**Remote**: A module that is loaded from a different build.
**Host**: The application that consumes remote modules.
**Shared**: Dependencies that are shared between host and remote applications.

Setup

To set up Module Federation, you need to configure your `webpack.config.js` files for both the host and remote applications.

Host Configuration


                    const { ModuleFederationPlugin } = require("webpack").container;

                    module.exports = {
                        // other configurations
                        plugins: [
                            new ModuleFederationPlugin({
                                name: "host",
                                remotes: {
                                    remoteApp: "remote@http://localhost:3001/remoteEntry.js",
                                },
                                shared: {
                                    react: {
                                        singleton: true,
                                        eager: true,
                                    },
                                    "react-dom": {
                                        singleton: true,
                                        eager: true,
                                    },
                                },
                            }),
                        ],
                    };

Remote Configuration


                    const { ModuleFederationPlugin } = require("webpack").container;

                    module.exports = {
                        // other configurations
                        plugins: [
                            new ModuleFederationPlugin({
                                name: "remote",
                                filename: "remoteEntry.js",
                                exposes: {
                                    "./Component": "./src/Component",
                                },
                                shared: {
                                    react: {
                                        singleton: true,
                                        eager: true,
                                    },
                                    "react-dom": {
                                        singleton: true,
                                        eager: true,
                                    },
                                },
                            }),
                        ],
                    };

Code Example

Here's a simple example of consuming a remote component:


                    import React, { Suspense } from 'react';

                    const RemoteComponent = React.lazy(() => import('remoteApp/Component'));

                    function App() {
                        return (
                            
                                Host Application
                                Loading...}>


                        );
                    }

                    export default App;

Best Practices

Keep shared dependencies in sync to avoid version conflicts.
Minimize the number of shared modules to reduce bundle size.
Use dynamic imports to load remote components only when needed.

FAQ

What is Module Federation?

Module Federation is a Webpack 5 feature that allows for sharing code dynamically between multiple applications.

Can I use Module Federation with React?

Yes, Module Federation works seamlessly with React and other frameworks.

Is Module Federation compatible with Webpack 4?

No, Module Federation is a feature of Webpack 5 and is not backward-compatible with Webpack 4.