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

Update:

Just realized, that your question is directed at Micro Frontends (not only micro services) and therefore is not about sharing libraries with Webpack in general. Added Micro Frontend to your tags/title and updated the answer to be more focused on this topic.

---

So my problem just one: I don't want to duplicate vendor libraries like react, react-dom (any others). And I want to make them shared among other [Micro Frontends] (which is bundled with webpack)

What you can do is exclude dependencies from the output bundle of your Micro Frontends by adding a Webpack externals property to the config.

webpack config of your Micro Frontends:

module.exports = {
  ...
  externals = {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
}

Above config would exclude react and react-dom and expect them in the global variables React and ReactDOM. You can then share those dependencies by including the libraries in a script inside index.html of your root applicationn aka stitching layer:

  ...
  
    ...
    
    
  

If you have other common components to share, you can also integrate the library scripts in a component library.

The reason for the include as script is: We do not want that our container has to require/import the Micro Frontends at build time in order to avoid a coupling of build/release/version management between all apps. Instead one purpose of Micro Frontends is to achieve fully independent deployment of the parts, which include continuous delivery steps from build, test to release.

I know what is the bad practice to have some global stuff (it's violate the whole idea of bundeling with webpack).

Of course, you create some form of coupling between the apps. But if you have a mature, stable and common library shared by all parts, it is a reasonable decision.

Hope, it helps (now)!