Webpack 5 Has a Free Module Federation API That Enables Micro-Frontends

Webpack 5 introduced Module Federation — a game-changing API that lets separate applications share code at runtime. This is the foundation of micro-frontend architecture. Module Federation: Share Code at Runtime // webpack.config.js — Host Application const { ModuleFederationPlugin } = require ( " webpack " ). container ; module . exports = { plugins : [ new ModuleFederationPlugin ({ name : " host " , remotes : { dashboard : " dashboard@https://dashboard.example.com/remoteEntry.js " , analytics : " analytics@https://analytics.example.com/remoteEntry.js " , }, shared : [ " react " , " react-dom " ], }), ], }; // Load remote component dynamically const Dashboard = React . lazy (() => import ( " dashboard/Widget " )); const Analytics = React . lazy (() => import ( " analytics/Chart " )); // webpack.config.js — Remote Application new ModuleFederationPlugin ({ name : " dashboard " , filename : " remoteEntry.js " , exposes : { " ./Widget " : " ./src/components/DashboardWidget " , " ./utils "