JavaScript Unscripted

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...

Problem: Using one JS file inside another   GITHUB Suppose you have two files:  math.js (exports a function)   main.js (wants to use that function)  Issue: Browser doesn’t understand imports automatically   main.js doesn’t know about math.js   There’s no built-in way to "import" functions before ES6 modules   This leads to errors like add is not defined Common workaround before module bundlers Using <script> tags (manual loading) html <script src="math.js"></script> <script src="main.js"></script> Problem:      Order matters! math.js must be before main.js     Too many <script> tags if we have multiple files     No way to bundle or optimize files   How Webpack Helps 1. Allows using import/export syntax 2. Webpack bundles all files into one Instead of manually loading multiple scripts, Webpack combines them into a single bundle.js, wh...