Power of webpack in 2 hours

What you will learn

Viewers will learn the use of webpack

Use of webpack with Micro front end

Viewers will learn how to parse Typescript using loaders

Viewers will learn how to compile the SCSS files

Viewers will learn will be able to create 2 different micro front ends and connect them


Learn how to optimize your React JS application using Webpack and implement a scalable Micro-Frontend UI Architecture. In this comprehensive Udemy course, you will gain hands-on experience and practical knowledge to enhance your development skills.

Files Minification


Compressing Images

Parsing SCSSΒ files

Parsing React Code using babel loader to plain javascript

Get Instant Notification of New Courses on our Telegram channel.

Implementing micro front ends using different front end programming languages

Webpack Configuration

Eslinting using webpack

Course Highlights:

  1. Introduction to Webpack:
    • Understand the role of Webpack as a module bundler for JavaScript applications.
    • Explore Webpack configuration files, loaders, and plugins to optimize your development workflow.
    • Learn how to bundle and optimize your React JS application using Webpack.
  2. React JS Fundamentals must be already aquired by viewer :
    • Gain a solid foundation in React JS concepts and syntax.
    • Learn how to build reusable components and manage state using React Hooks.
    • Understand the React component lifecycle and how to handle events and data flow.
  3. Micro-Frontend UI Architecture:
    • Discover the benefits and principles of Micro-Frontend UI Architecture.
    • Learn how to break down your React JS application into micro-applications for better modularity and scalability.
    • Implement communication and sharing of data between micro-applications using shared libraries or frameworks.
  4. Integrating Webpack with React JS:
    • Explore the integration of Webpack with React JS for efficient module bundling.
    • Configure Webpack to optimize your React JS application’s performance and loading speed.
    • Apply code splitting techniques to lazy load components and improve initial load times.
  5. Implementing Micro-Frontends with React JS:
    • Dive into the practical implementation of Micro-Frontends using React JS.
    • Learn how to create independent micro-applications and integrate them into a single cohesive user interface.
    • Explore techniques to handle routing, state management, and cross-micro-application communication.
  6. Testing and Deployment:
    • Discover strategies for testing your React JS application and micro-applications.
    • Understand best practices for deployment and hosting of Micro-Frontend UI Architecture.
    • Learn about continuous integration and continuous deployment (CI/CD) pipelines for efficient development workflows.
  7. Real-World Projects and Examples:
    • Apply your knowledge to real-world projects and work on hands-on exercises.
    • Gain practical experience in building scalable React JS applications with Micro-Frontend UI Architecture.
    • Get guidance and insights from the instructor through detailed explanations and code demonstrations.

By the end of this course, you will have a strong foundation in using Webpack with React JS and be able to implement a Micro-Frontend UI Architecture for scalable and modular web applications. Enroll now and take your React JS skills to the next level!



Use of Webpack with Micro Frontend

Intro-Use of Webpack with Micro Frontend
Understand the problem Statement
Definition of webpack
Things Before Webpack
Bundle less Representation (before webpack)
World after webpack
World After Webpack (About Bundling)
Webpack possibilities- Key Features
Webpack possibilities- Key Features Continuation
Webpack possibilities- Key Features Continuation
What Monolithic, Micro service and Micro Front end architecture
Monolithic and micro service architecture – Part 2
Key Characteristics – Micro Frontend
Definition – Micro Frontend
Key Characteristics of Micro Frontend
Monolithic architecture

02-Webpack Config file

02-Webpack Config file
Webpack Entry Point
03-Webpack Output Bundles
04-Webpack single entry points
05-Webpack multiple entry points
06-Webpack modules support
07-Difference Between Common JS and ESM
Webpack Entry Points

01-Loaders and Plugins

01-Loaders and Plugins
02-What is Loader
03-Webpack modules support
06-Plugins Usage
07-Plugins Installation using npm

04-Micro Front ends

04-Micro Front ends
02-Micro Front end Components
03-Micro Front end Examples
04-The real connector – Module Federation Plugin
Plugin for micro front end implementation

05-Configuring Webpack for Micro-Frontends

05-Configuring Webpack for Micro-Frontends
05-Configuring Webpack for Micro-Frontends part 2

06-Real Code – 2 different Micro front end samples

06-Real Code – 2 different Micro front end samples
06-Real Code – 2 different Micro front end samples part 2
Exposing a component is allowed in webpack module federation plugin ?

07-Deployment Strategies

07-Deployment Strategies
Deployment strategies
Deployment strategies

08-Optimizations and Performance

Code Splitting
Lazy Loading
Lazy Loading


Minification in webpack


02-Run Webpack Command

Related tools

Related tools

12-Integration with React JS

12-Integration with React JS
Integration of Webpack Micro front end with other technologies

13-Challenges faced

13-Challenges faced
Part 2
Debugging & Deployment in micro front end