Benefits of using Module Federation

Module Federation allows different parts of the app to be built and deployed independently, which allows teams to work on different modules concurrently without affecting the rest of the app. It also allows for easier testing and debugging of individual modules, as they can be isolated and tested in isolation.

What is Webpack

Module Federation is used with Webpack, which is a popular module bundler for JavaScript applications. Webpack allows you to bundle and load several modules on demand.

Let's see an example

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

module.exports = {
// ... other webpack configuration options
plugins: [
new ModuleFederationPlugin({
name: "my-federation",
library: { type: "var", name: "myFederation" },
filename: "my-federation.js",
exposes: {
"./componentA": "./src/components/componentA",
"./componentB": "./src/components/componentB"
},
shared: ["react"]
})
]
};

The code above uses the ModuleFederationPlugin to enable module federation in a Webpack project. The plugin takes several options that define the behavior of the federation.

The name option specifies the name of the federation. This is used to identify the federation when it is loaded by other applications.

The library option specifies the type of the exposed library and its name. In this example, the library is exposed as a global variable with the name myFederation.

The filename option specifies the name of the generated bundle file that contains the federation.

The exposes option is a mapping of modules to be exposed by the federation. In this example, the modules ./componentA and ./componentB will be exposed by the federation.

The shared option specifies a list of modules that should be shared between the federation and other applications. In this example, the react library is shared between the federation and other applications.

When the webpack configuration is run, the plugin will generate a bundle file (specified by the filename option) that contains the federation. This bundle can then be loaded by other applications, allowing them to access the exposed modules and shared modules.