How does Webpack Module Federation work?

Module Federation (Webpack 5) lets a running application dynamically load code from another independently deployed app at runtime.

Key concepts:

• Host — the shell app that consumes remote modules.
• Remote — an app that exposes modules. It builds a remoteEntry.js file.
• Shared — dependencies both apps use (React, ReactDOM) are declared shared so only one copy loads.

// Remote webpack.config.js
plugins: [new ModuleFederationPlugin({
  name: 'checkout',
  filename: 'remoteEntry.js',
  exposes: { './CheckoutApp': './src/CheckoutApp' },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
})]

// Host webpack.config.js
plugins: [new ModuleFederationPlugin({
  remotes: { checkout: 'checkout@https://checkout.example.com/remoteEntry.js' },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
})]

// Host usage
const CheckoutApp = React.lazy(() => import('checkout/CheckoutApp'));

Runtime behaviour: the host downloads remoteEntry.js on demand, negotiates shared module versions, and loads only what's needed.