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

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... "