Suggest an edit

Improve this article

Refine the answer for “What is used to implement "micro frontends" in Webpack?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

"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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts216 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.