Are you familiar with Module Federation? Have you used it in a project?

Module Federation is a technology in Webpack 5 that allows dynamically loading and using modules from other builds at runtime. It facilitates the creation of micro frontends, where different parts of an application can be developed and deployed independently.

Main advantages:

• Code sharing between teams
• Reuse of components
• Updating parts of the application without a full rebuild

In practice, I have used Module Federation to integrate multiple micro frontends into a single interface, which allowed teams to work autonomously and sped up releases.

Example configuration in Webpack:

// In the host application
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
  },
});

// In the remote application
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/Button',
  },
});

This allows the host application to dynamically import the Button component from remoteApp.