Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «За допомогою чого реалізуються "Мікрофронтенди" у Webpack?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

"Мікрофронтенди" в екосистемі Webpack реалізуються за допомогою **Module Federation** - механізму, що з'явився у **Webpack 5**.

---

### **Що робить Module Federation**

Module Federation дозволяє одному фронтенд-застосунку:

- **імпортувати модулі з іншого віддаленого застосунку під час виконання (runtime)**
- **ділитися власними модулями із зовнішніми фронтендами**
- **не збирати все в один бандл**, а завантажувати функціональність динамічно

Тобто кожен мікрофронт збирається своїм Webpack'ом, але в браузері вони можуть **жити поруч і обмінюватися кодом**, не знаючи один про одного на етапі збірки.

---

### **Ключові можливості Module Federation**

| Можливість | Опис |
|---|---|
| `remote` | Підключення модулів із зовнішнього застосунку |
| `exposes` | Публікація своїх модулів для інших фронтів |
| `shared` | Спільні залежності (наприклад, React), щоб не тягнути їх двічі |

---

### **Приклад налаштувань (суть)**

```js
plugins: [
  new ModuleFederationPlugin({
    name: 'app1',
    remotes: {
      app2: 'app2@http://localhost:3002/remoteEntry.js'
    },
    exposes: {
      './Header': './src/components/Header'
    },
    shared: ['react', 'react-dom']
  })
]
```

---

### **Підсумок**

| Технологія | Навіщо |
|---|---|
| **Module Federation** | Основний інструмент для мікрофронтендів на Webpack |
| **Webpack 5** | Нативна підтримка без милиць і сторонніх бібліотек |

**Відповідь:** мікрофронтенди у Webpack реалізуються через **Module Federation Plugin**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати193 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.