What is used to implement "micro frontends" in Webpack?
"Micro frontends" in the Webpack ecosystem are implemented using Module Federation, a mechanism introduced in Webpack 5.
What Module Federation does
Module Federation lets one frontend application:
- import modules from another remote application at runtime
- share its own modules with external frontends
- avoid bundling everything into one bundle, and load functionality dynamically instead
In other words, each micro frontend is built by its own Webpack, but in the browser they can live side by side and exchange code, without knowing about each other at build time.
Key capabilities of Module Federation
| Capability | Description |
|---|---|
remote | Connecting modules from an external application |
exposes | Publishing your own modules for other frontends |
shared | Shared dependencies (for example, React), so they are not pulled in twice |
Configuration example (the essence)
js
plugins: [
new ModuleFederationPlugin({
name: 'app1',
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js'
},
exposes: {
'./Header': './src/components/Header'
},
shared: ['react', 'react-dom']
})
]Summary
| Technology | Why |
|---|---|
| Module Federation | The main tool for micro frontends in Webpack |
| Webpack 5 | Native support without workarounds or third-party libraries |
Answer: micro frontends in Webpack are implemented through the Module Federation Plugin.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.