Webpack 5 Configuration for Micro Frontends — Complete Guide

publicPath: "https://localhost:4002/" That one line cost me 3 hours in production. Every chunk after remoteEntry.js returned 404. The fix? Change it to publicPath: "/products/" . The Webpack config you use for local Micro Frontend development is fundamentally different from what you deploy. 7 settings change between environments, and most tutorials only show one config. What this article covers Every section of the Webpack 5 config for Micro Frontends, shown TWICE — local development AND production — side by side: Entry & Output Host uses publicPath: "/" in both environments Remotes use https://localhost:PORT/ locally, /mfe-name/ in production Production adds [contenthash] for long-term caching Babel Loader Standard: only processes src/ Monorepo: MUST include ../../packages for shared package JSX Forgetting this = SyntaxError: Unexpected token < at runtime Dev Server Local: HTTPS (mkcert), CORS headers ( Access-Control-Allow-Origin: * ), historyApiFallback Production: No devServer at a