Introduction to Webpack Module Federation

What is Module Federation?

Module Federation is a feature of Webpack 5 that allows multiple web applications to share and load code dynamically. It enables the development of micro frontends where different teams can work on separate parts of the application while still being able to integrate seamlessly.

Key Concepts

• Remote Module: A module that is loaded from another application.
• Host Application: The main application that loads remote modules.
• Shared Libraries: Libraries that can be shared between the host and remote applications to avoid duplication.

Step-by-Step Setup

To set up Module Federation, follow these steps:

1. Install Webpack 5 in your project.
2. Configure the Webpack settings for both the host and remote applications.
3. Define the shared dependencies in the Webpack configuration.
4. Expose the components in the remote application.
5. Import the remote components in the host application.

Example Configuration

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

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

Best Practices

• Keep shared dependencies at the same version across applications.
• Optimize the loading of remote modules by preloading when possible.
• Use a consistent naming scheme for exposed modules to avoid conflicts.

FAQ