How to create a Micro Frontend bundle with Webpack that shares libraries with the container application?

Question

I have a task.

To have Micro Frontends with single-spa framework.

1. portal/main application (which load all other js code by url)
2. Micro Frontend 1 (

Answer 1

The best way to achieve this today is using Webpack's new Module Federation technology released in v5. This approach does not use SystemJS but rather the internals of Webpack. We tried several different micro frontend approaches, but this one outshines them all & is currently running successfully for us in production. There are definitely some challenges to setting it up but it was worth the developer productivity gains.

Here is the info site produced by the creator Zack Jackson which should provide all the resources you need: https://module-federation.github.io/

Here is the link to webpack docs which deal more with technicalities rather than how to practically set up a full micro frontend architecture: https://webpack.js.org/concepts/module-federation/