За допомогою чого реалізуються "Мікрофронтенди" у Webpack?
"Мікрофронтенди" в екосистемі 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.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.