2min read

Module Federation with Webpack 5

Module Federation is a technique for improving the modularity and performance of large-scale web applications. It allows different parts of the application, known as modules, to be loaded on demand, rather than all at once at the start of the application. This can significantly reduce the initial load time of the app and improve the user experience.

Leonardo Rosseti senior frontend developer

By Leonardo Rosseti

Senior frontend developer

13 December 2022

Module federation

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.

Share

About Author

Leonardo Rosseti senior frontend developer

Leonardo Rosseti

Senior frontend developer

Leonardo Rosseti is a senior frontend developer with a strong passion for coding and music. When he is not coding you can find him playing 90's dance music in front of the loudest and craziest crowds.

Extendi logo

Enabling Digital Innovation

Newsletter

Get periodic updates, the best insights and some precious tips.

Language

Italiano

|

English

Copyright © 2022 · Privacy policy

P.iva 06304560482