Module Federation

ELI5 — The Vibe Check

Module Federation lets separate webpack builds share code at runtime. App A can dynamically load a component from App B's bundle — no npm package needed. It's the technology that makes micro frontends actually practical.

Real Talk

A webpack 5 feature (also available in Vite via plugins) that allows multiple independently built JavaScript applications to share modules at runtime. A 'host' application can dynamically load 'remote' modules from other applications, enabling micro frontend architectures with shared dependencies and runtime code sharing.

Show Me The Code

// webpack.config.js (Remote App)
new ModuleFederationPlugin({
  name: 'cart',
  filename: 'remoteEntry.js',
  exposes: {
    './CartWidget': './src/CartWidget',
  },
  shared: ['react', 'react-dom'],
})

// Host App loads it dynamically
const CartWidget = React.lazy(() => import('cart/CartWidget'));

When You'll Hear This

"Module Federation lets the cart team deploy their widget without rebuilding the main app." / "Shared dependencies in Module Federation prevent loading React twice when composing micro frontends."