Power of webpack in 2 hours
- New
- Rating: 4.1 out of 54.1 (4 ratings)
- 746 students
- 1hr 37min of on-demand video
- Created by Sampurna Atmaramani
- English
What you’ll 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
Requirements
- At least basic Javascript knowledge is must
- knowledge of react would be added advantage
Description
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
Bundling
Compressing Images
Parsing SCSS files
Parsing React Code using babel loader to plain javascript
Implementing micro front ends using different front end programming languages
Webpack Configuration
Eslinting using webpack
Course Highlights:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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!
Who this course is for:
- Javascript React / Vue / Angular / Next Developers
Show less
Course content
13 sections • 47 lectures • 1h 37m total lengthCollapse all sections
Use of Webpack with Micro Frontend15 lectures • 34min
- Intro-Use of Webpack with Micro Frontend02:13
- Understand the problem Statement03:42
- Definition of webpack02:12
- Things Before Webpack00:55
- Bundle less Representation (before webpack)00:38
- Webpack1 question
- World after webpack01:01
- World After Webpack (About Bundling)00:52
- Webpack possibilities- Key Features03:05
- Webpack possibilities- Key Features Continuation02:45
- Webpack possibilities- Key Features Continuation04:34
- What Monolithic, Micro service and Micro Front end architecture04:35
- Monolithic and micro service architecture – Part 200:55
- Key Characteristics – Micro Frontend01:04
- Definition – Micro Frontend01:52
- Key Characteristics of Micro Frontend03:13
- Monolithic architecture1 question
02-Webpack Config file7 lectures • 12min
- 02-Webpack Config file01:11
- Webpack Entry Point01:08
- 03-Webpack Output Bundles02:02
- 04-Webpack single entry points01:01
- 05-Webpack multiple entry points00:55
- 06-Webpack modules support01:32
- 07-Difference Between Common JS and ESM04:02
- Webpack Entry Points1 question
01-Loaders and Plugins6 lectures • 5min
- 01-Loaders and Plugins01:12
- 02-What is Loader01:22
- 03-Webpack modules support00:41
- 04-Plugins00:25
- 06-Plugins Usage00:20
- 07-Plugins Installation using npm01:13
04-Micro Front ends4 lectures • 9min
- 04-Micro Front ends01:13
- 02-Micro Front end Components03:04
- 03-Micro Front end Examples00:53
- 04-The real connector – Module Federation Plugin03:32
- Plugin for micro front end implementation1 question
05-Configuring Webpack for Micro-Frontends2 lectures • 6min
- 05-Configuring Webpack for Micro-Frontends02:39
- 05-Configuring Webpack for Micro-Frontends part 203:20
06-Real Code – 2 different Micro front end samples2 lectures • 8min
- 06-Real Code – 2 different Micro front end samples04:47
- 06-Real Code – 2 different Micro front end samples part 203:09
- Exposing a component is allowed in webpack module federation plugin ?1 question
07-Deployment Strategies2 lectures • 6min
- 07-Deployment Strategies02:30
- Deployment strategies03:24
- Deployment strategies1 question
08-Optimizations and Performance2 lectures • 2min
- Code Splitting01:03
- Lazy Loading00:55
- Lazy Loading1 question
09-Minification1 lecture • 2min
- 09-Minification01:47
- Minification in webpack1 question
Bundling2 lectures • 2min
- Bundling01:27
- 02-Run Webpack Command00:10
- Bundling1 question
Related tools1 lecture • 3min
- Related tools03:17
12-Integration with React JS1 lecture • 3min
- 12-Integration with React JS02:48
- Integration of Webpack Micro front end with other technologies1 question
13-Challenges faced2 lectures • 7min
- 13-Challenges faced04:07
- Part 202:36
- Debugging & Deployment in micro front end1 question
