Webpack 5 Has a Free Module Federation Feature — Share Code Between Apps at Runtime

#webdev #javascript #webpack #microfrontend

Webpack 5's Module Federation lets separate applications share code at runtime. No rebuilding. No npm publishing. Just live code sharing between independent apps.

What Is Module Federation?

Traditional approach: App A and App B share a component library. You publish to npm, both apps install it, rebuild, redeploy.

Module Federation: App A exposes components. App B imports them at runtime. Update App A → App B automatically gets the update. No rebuild.

What You Get for Free

Host app (consumes remote modules):

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

// Use remote component like a local import
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <Suspense fallback="Loading...">
      <RemoteButton onClick={() => alert('hello')} />
    </Suspense>
  );
}

Remote app (exposes modules):

new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button',
    './Header': './src/components/Header',
  },
  shared: ['react', 'react-dom'],
});

Use Cases

Micro-frontends — independent teams deploy independent apps that compose into one UI
Shared design systems — update once, all apps get the update
A/B testing — swap components at runtime without full redeployment
Plugin architecture — load third-party extensions dynamically

Shared Dependencies

Module Federation deduplicates shared dependencies. If both apps use React 18, only one copy loads. Version mismatches? Each gets its own copy (no crashes).