Webpack 5 Ninja - Build Micro frontend and web apps

Explore how webpack 5 loaders load JavaScript, images, styles, and more. Learn why a dedicated loaders section enables loading html and json into a single optimized bundle.

Explore how Webpack uses loaders to handle non-javascript files, enabling images and styles to be bundled and explaining the dependency graph and loader configuration.

Learn to load external css files in Webpack 5 using style-loader and css-loader, configure module rules, and understand loader order from right to left to inject styles into the page.

Learn how CSS modules work in webpack 5 by configuring style loaders, enabling modules, and applying local styles, while exploring global styles and random class names for isolation.

Install and configure scss loaders in webpack to compile scss into CSS, then inject styles with style-loader. Learn to handle both scss and sass syntax, update imports, and verify builds.

Learn to load images in webpack 5 using built-in loaders and asset modules, with hashed filenames placed in an images folder.

Learn how to load fonts with webpack five by adding a font asset to the assets folder, importing it, and applying its font family to the header using loaders.

Explore how loaders handle different file types, including CSS, review module concepts, and use the asset module guide to extend loader usage before moving to plugins.

Master Webpack plugins, learn why they matter, and explore creating multiple bundle files and automations, including auto bundling and dynamic imports, to become a Webpack ninja.

Explore configuring Webpack for multiple entry points and separate bundles for index and product pages, with proper output naming and script injection to automate builds.

Explore how webpack plugins fit into the build ecosystem, injecting dependencies, managing environments, and optimizing bundles. Learn about html minimization and asset extraction for caching.

Learn to use the html webpack plugin in a webpack 5 project to generate multiple html files for two entry points, and configure templates, chunks, and dependency injection.

Fix a broken page by correcting assets and image paths, manually copying missing test and image files into the right folders, and setting up future automation with hot reloading.

Learn to enable automatic reloading with webpack dev server, configure a static directory, and launch a development server that watches files and refreshes the browser on changes.

Apply webpack to a legacy site by migrating assets, refactoring code, and integrating plugins, imports, and dependency management to deliver a production ready micro frontend and web app.

Initialize npm, install and manage dependencies (jquery, bootstrap, typed dogs, validate ideas, toaster), create webpack config, and set up a dev server to load and bundle assets.

Configure a basic webpack setup with two entries (index and courses), dynamic output filenames, and clean output, then add a dev script and enable development mode while preparing loaders.

Learn to set up css and scss loaders in a webpack 5 project by configuring css-loader, style-loader, and sass-loader, updating module rules, and building with a dev server.

Install dependencies, configure the html webpack plugin for index.html and courses.html, and run the dev script to set up a webpack five dev server.

Analyze why the banner image and course pages fail to load, diagnose missing assets and incorrect paths, then configure webpack asset handling to copy and load images correctly.

Learn how to use the copy plugin to copy assets from the assets folder to the dist folder, configure patterns and context, and adjust asset paths for reliable loading.

Fix imports in the courses page by consolidating dependencies, importing course data and libraries (bootstrap, typed, jquery), updating assets, and ensuring the Webpack-driven render flow builds clean, error-free pages.

Analyze the last project build to remove duplicates, optimize the bundle, and reduce load times, featuring pre shaking and moving styles to a separate library.

Master code splitting in Webpack 5 by extracting shared dependencies into a common bundle to avoid duplication and load when needed with multiple bundles.

Analyze the webpack build to reveal how dependencies load across the course and index bundles, using the bundle analyzer plugin to spot duplicated libraries and vendor files for optimization.

Learn to optimize Webpack 5 bundles using splitChunks to create shared vendor and index bundles, improving caching and reducing duplicate dependencies.

Learn how to implement lazy loading with dynamic imports in Webpack 5, loading the pricing modal only after a user click and showcasing split chunk loading.

learn how adding a content hash to webpack output filenames enables cache busting, changing only when bundle contents change, and reduces unnecessary network requests.

Explore production optimization techniques for webpack 5, including pre shaking, dead export removal, and code splitting, and configure environment-specific settings for development versus production to speed up live deployments.

Extract css from html by implementing mini-css-extract-plugin, removing the style-loader, and splitting css into a separate file to enable caching, reduce flicker, and improve production loading.

Master shimming by using Webpack's provide plugin to expose legacy libraries on the window object, with globals like $, underscore, and moment.

This lecture shows how to remove dead CSS by using purgecss webpack plugin with glob to scan project files, and a safe list to protect dynamic classes.

Learn how tree shaking in webpack production mode removes dead JavaScript by keeping only used ES module exports, reducing bundle size and optimizing the final build.

Explore development versus production mode in webpack, focusing on plugins, tree shaking, asset copying, and environment variables. Understand shared loaders and entry/output settings across modes.

Split webpack configuration into common, dev, and prod files to optimize development and production builds, moving loaders and plugins into environment-specific configs while preserving shared settings.

Combine common webpack configurations with environment-specific ones using webpack-merge, injecting shared settings into dev and prod builds. Run npm scripts to generate readable dev output and minified production assets.

Learn how a React app builds with Webpack, using a single entry point and router between login and movies pages, with Babel loader for JSX, PostCSS, and Airbnb configurations.

Create a React app with a custom webpack build, organize src with assets, components, and pages, set up routing with BrowserRouter, bootstrap via index.html and index.js, and prepare Babel config.

Define entry and output configurations in webpack 5 for a single page application and set up html webpack plugin with a template and output file.

Learn to configure webpack 5 with loaders via module rules, including css and image loaders, and set up a dev server with static directory, port 9000, open, and development mode.

Learn how to add babel loader to webpack 5 to compile React JSX, configure env and React presets, and optimize with split chunks and vendor bundles for micro frontend apps.

Configure historyApiFallback on the dev server to support client-side routing and prevent errors when using the browser back and forward buttons.

Learn to add a postcss loader to your webpack config, supply postcss options, and use the postcss preset env plugin to enable browser compatibility in your css pipeline.

Configure ESLint with Airbnb rules using the ESLint plugin, set Babel parser, extend Airbnb config, and enable ESLint loader with auto-fix to standardize React code in a webpack build.

Explore micro frontends, connecting components, loading one micro frontend into another, and navigating across apps with events and state management.

Explore why micro frontends speed up development by decoupling frontend teams and deployments, using independent repositories and separate pipelines to update components without impacting the whole app.

Explore a micro frontend approach to build a movie booking app with a homepage, quick booking component, and a details page, while data loads dynamically from a local server.

Start three micro frontend apps with webpack—the mf server, home page, and React component app—using unique ports to avoid conflicts, install dependencies, then start the development servers.

Explore module federation basics to implement micro frontends by exposing components and consuming remotes across applications on different ports, using remote entry files and application naming.

Expose and share react components using webpack module federation, configuring exposes and remote entry to load the movie card and button components from a micro frontend across apps.

Integrate multiple apps and load movies data for the homepage using the fetch API and async/await from the local host 5555/movies.

Learn to import remote components with module federation to render a movie card from an app in a micro frontend setup, configuring remote entries and using suspense for dynamic loading.

Load all movie data from the server into state, then render each item's name and image using the movie card component inside a single suspense block for efficient rendering.

Update the webpack config and use dynamic import to wire the typography component into the quick booking header, demonstrating reusable title text across the app.

Initialize more micro-frontends by launching the seed selection and details page apps with npm install and serve. Resolve regenerator runtime and data loading issues, and verify cross-app navigation.

Coordinate micro frontends with a root router to load the homepage, details page, and booking page using the React Out routing library.

Demonstrates routing and navigation in a micro-frontend movie app using webpack five module federation, exposing a home page and loading it remotely via remote entry.

Resolve invalid hook calls from multiple React copies by configuring module federation shared for React and react-dom, and bootstrapping apps with a separate bootstrap file.

Configure Webpack 5 module federation, create bootstrap files, and expose details page and seed selection for a details and booking route, wiring remote apps into the main router.

Navigate from the homepage to the details page by wiring a click listener on movie cards, passing a callback, and using history.push to render the details view.

Pass the movie id as a path parameter and read it with use location to navigate to and display the correct movie details in a micro frontend setup.

Explore routing with React context to navigate from quick booking to the booking page. Implement a routing context providing history and location to the homepage and quick booking.

Explore state management for micro frontends by comparing push and pull data flows, using observable patterns to share selected movie, date, and time data across apps.

Learn the basics of RxJS by exploring observables and subjects, using next and subscribe, and comparing promises versus observables in a micro frontend context.

Publish booking data to a shared observable in a micro-frontend with webpack module federation, exporting observable from movie app, then dynamic-importing to publish and subscribe in the consumer app.

Consume the booking event by subscribing to the movie data observable from the seed booking app, using useEffect and dynamic import to receive real-time updates on the booking page.

Wire the load booking function with collaborators and logs to refresh data, render seed bookings, and display selected movie, date, and time for a functional booking flow.

Publish the booking data from the movie details page by wiring the book now button to the movie data observable, using dynamic import, and navigate via the history object.

Learn to build and connect multiple apps with webpack module federation, using exposes and remote in a container app for routing and data management, plus dynamic import.

Master Webpack fundamentals, configure and run it across multiple applications, and merge them into a single application using micro frontend concepts.

Learn how to use environment variables in a Node.js app to switch configurations by environment (dev, production), manage database connection parameters, and implement environment-aware behavior.

Explore the Node.js path module by importing it, obtaining a file's directory, and using path.resolve and path.join to build absolute and OS-aware paths.

Learn the basics of regular expressions and how webpack uses them to match file types in bundling. Build skills with groups, character classes, quantifiers, and end anchors for precise matches.