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 all — Nginx serves static files

Why HTTPS is required locally:
Module Federation loads remote code via `

article link :- https://blog.srinudesetti.in/micro-frontend/react/webpack-5-configuration-micro-frontend