Micro Front-End: Module Federation
What is Module Federation? To understand Module Federation, we need to first know some basics of webpack: Webpack Basics Now that we know that webpack bundles all the source files the bundled files sits in a /dist folder (or as configured in webpack.config.js) We need to add plugins if we need to bundle HTML files We need to add "rules" if we need to bundle CSS files Just like how we had to add a special plugin to bundle HTML files, we also need a special plugin for Module Federation Basic idea behind Module Federation An app can have multiple "micro apps". Each containing its own "package.json". Each of these apps run on their own in their own port. These apps can still share some code and talk to each other. To summarize, each of these apps can expose certain modules and consume certain modules They share these modules at runtime. They don't depend on the contents of the "dist" folder GITHUB EXAMPLE Create 2 folders (remote-app, host-app...