Webpack Module Federation: Runtime Integration Principles and Micro-Frontend Application

Concept and Necessity of Module Federation

Webpack 5's Module Federation is a feature that integrates multiple applications as a single application at runtime after building them individually. Unlike previous micro-frontend approaches that relied on monorepo-based build-time integration, this feature allows independent build artifacts to be linked together.

This technology offers the following benefits as service scale increases:

• Reduced build and deployment time: Only changed containers are built, reducing the overall build burden.
• Minimized impact: The verification scope can be limited to the changed container.
• Loading efficiency: Only remote modules from deployed containers are newly loaded, resulting in short loading times immediately after deployment.

Core Terminology and Operating Principles

Module Federation defines applications in units of Containers, where each container can load Remote Modules from other containers or Expose them.

• Remote App: A container that Exposes modules
• Host App: A container that uses remote modules
• Shared Modules: Dependencies loaded only once at runtime (e.g., React)

Operating process:

1. The Remote App generates a remoteEntry.js file to provide a module map.
2. The Host App loads remoteEntry.js to set up a global variable (e.g., app2).
3. The Host App dynamically loads remote modules using methods like import("app2/Button").

Caveats and Limitations

There are the following constraints when actually adopting this:

• Lack of type information: The Host App does not automatically recognize the types of remote modules, so type definitions must be managed separately.
• Path management complexity: Since the URL of remoteEntry.js varies by environment (development, production, etc.), appropriate path configuration logic is required at build time or runtime.