Webpack & Micro-Frontend UI architecture Hands on (2025 Jan)

Learn the webpack config file, the heart of webpack, and how to configure modules, loaders, plugins, entry, output, and port numbers.

Discover how webpack uses an entry point to build the dependency graph, tracing the modules, files, images, assets, and imports required by your application from a single starting file.

Webpack generates output bundles by bundling the dependency graph into a root folder, delivering browser-ready JavaScript and css via the output property, and an index.html loads all dependencies.

Explore how webpack uses a single entry point (App.js) to produce bundle.js in a dist folder, booted by index.html, and contrast with multi-entry configurations.

Explore configuring webpack with multiple entry points, defining app and admin entries, and producing corresponding output files such as app.bundle.js and admin.bundle.js inside the dist folder.

Explore webpack module support, including dot js extension and commonjs, configure rules with babel loader and presets, and exclude node_modules to optimize builds.

Compare commonjs and esm modules, focusing on import/export vs require, static compile-time analysis, and runtime versus build-time evaluation, and how webpack enables bundling and tree shaking.

Explore loaders and plugins as the heart of the Webpack configuration, enabling transformation and optimization of various assets by pre-processing files and building the dependency graph into a bundle.

Discover how webpack loaders enable transpiling and asset processing, using babel loader for old browser compatibility, and CSS, file, URL, eslint, and TypeScript loaders configured in webpack.

Explore webpack modules support by configuring loaders and rules, using the Babel loader to parse JavaScript files with options, and see how a rules array can run multiple elements.

Explore how webpack plugins and json-based modules extend build functionality to optimize bundles, inject variables, manipulate chunks, and extract CSS, instantiated with the new keyword in webpack configuration.

Install and import plugins to customize functionality in webpack, leveraging loaders and plugins to implement your desired features.

Install and configure webpack plugins with npm to streamline builds; use clean webpack plugin to remove bundles in dist before new builds, and extract plugin to minify CSS for optimization.

Explore how micro-frontends extend microservices to the front end by decomposing the application into independent, loosely coupled units, each with its own repo and CI/CD enabling independently deployable units.

Learn micro-frontend architecture with a container host handling routing, state, and centralized styling, while remote components are exposed via module federation; study communication, authentication, and modular reuse.

Set up a host container on port 3000 and four microfrontends for user management, appointments, and payments on ports 3001 to 3003.

Discover the module federation plugin as the real connector for micro-frontend architectures, enabling runtime and build-time code sharing, reduced duplication, and lazy loading across React, Angular, and Vue.

Configure webpack for micro-frontends using module federation, shared npm packages, and a monorepo approach, enabling centralized APIs, state management, and reusable components across containers.

Configure module federation in webpack to wire a container with two remotes, remote one and remote two, exposing a button component and defining the remote entry file names.

Explore real code examples of two micro frontend samples and implement separate Webpack configurations per micro frontend, with distinct repositories, entries, outputs, and deployment pipelines.

Explore micro-frontend setup with Webpack by loading a remote hello React app into a host container, using a merge plugin and environment-specific Webpack configs.

Explore deployment strategies for micro-frontend architectures, including separate per-repo deployments, containerization with Docker and Kubernetes, and CDN caching with S3 and CloudFront for scalable, portable apps.

Implement deployment strategies for micro-frontends with service discovery, container-side routing, monitoring and logging with Grafana or New Relic, CORS, versioning, load balancing, CI/CD, integration testing, data sharing, and documentation.

Explore code splitting to optimize performance by loading only the required code on demand and leveraging lazy loading with multiple entry points. Ensure modules load conditionally and handle errors gracefully.

Explore lazy loading within micro-frontend architecture using react suspense and fallback, handling repo shutdowns by loading the button component on demand.

Explore minification within the bundling system by removing comments, spaces, and lines, using Webpack plugins for JavaScript minification and CSS minimizer, in production, and also compress images.

Learn how bundling staticizes a dependency graph into single output files. Identify how entry points and output paths produce a dist folder with bundle.js (and one css file) for index.html.

Run the Webpack build process using a simple command that executes the configuration file and its required steps.