webpack 5 Module Federation in 3 minutes

Module Federation allows a JavaScript application to dynamically load code from another application and  in the process, share dependencies.

• Webpack 5 Federation. A Game-changer to Javascript architecture. - Webpack inDepth

Motivation

Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually.

This is often known as Micro-Frontends, but is not limited to that.

• Module Federation Concepts

examples

• Examples of Module Federation

issue and pull request

• Merge Proposal: Module federation and code sharing between bundles. Many builds act as one · Issue #10352 · webpack/webpack
• Merge Module Federation into webpack 5 beta by sokra · Pull Request #10838 · webpack/webpack

code

• lib/container
• test/configCases/container

and more

• Zack Jackson (@ScriptedAlchemy) / Twitter
• module-federation/automatic-vendor-federation: Utility to enable automatic vendor sharing within bundles using Module Federation
• Webpack 5 and Module Federation - A Microfrontend Revolution - DEV Community 👩‍💻👨‍💻
• webpack 5 の webpack federation という概念について - Qiita
• webpack@5で入るModule Federationについて - 技術探し