English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 84 lectures (8h 25m) | 8.58 GB
Webpack 5 (2023).Basics to Advanced concepts like loaders ,plugins, Module Federation, Build production apps (React App)
Webpack 5 Ninja – Build Nodejs and Web apps complete guide , from scratch to production.
Webpack is one of the most essential tools for all web applications. This is going to be a very hands-on course, we are going to cover the basics concepts to some of the advanced concepts of Webpack 5 and see how we can use this tool to optimize a web application.
We are not only going to go over the concepts, but also take a real website I have created for this course and apply all our understanding to this course website. We shall apply core concepts such as Loaders to load CSS / Images and more, and Plugins to automate lots of stuff, then we shall see how we can tweak configurations specific to both the development and production environment.
I have also included a bonus section wherein we will create a React application from scratch without the use of the “create react app” utility. This will give a solid understanding of all the concepts and what happens behind the scene.
I have tried my best to structure this course in the easiest way to follow and will have all the resources available to download on Github as well as attached to this course.
This course does not require any knowledge of Webpack and will be beneficial to all developers making any type of website whether it’s using core HTML CSS or using frameworks and libraries such as React and Angular.
What you’ll learn
- Understand and implement Webpack 5 basics
- Learn basics of Micro Frontends
- Build and package Web and Nodejs Application
- Learn about optimizing builds using techniques like Tree shaking , multiple bundles , caching and more
- Full guide using a sample project
Table of Contents
Introduction Webpack Basics
1 Introduction
2 What is Webpack
3 Software installations
4 Understanding basic concepts
5 Download Course code repository
6 IMP Source Code download
7 Basic HTML Javascript Setup
8 Adding webpack configuration
9 Fixing our button click
10 CommonJS modules
11 ES6 Modules
Loading external data using Webpack
12 Loaders Section Introduction
13 What are loaders
14 CSS loaders Part 1
15 CSS loaders Part 2
16 SCSS Loaders
17 Loading images in JS
18 Fonts loaders
19 Loaders Recap
Customization and Enhancement using Plugins
20 Plugins section introduction
21 Multiple entry bundle
22 what are plugins
23 Using HTML Webpack plugin
24 Fixing our broken page
25 Automated Reloading Dev Server
Build a full website using Webpack Course Project
26 Section overview Webpack Website
27 Install dependencies via NPM
28 Basic Webpack config
29 CSS SCSS loaders setup
30 Dev server setup
31 Analyse the issue
32 Copy assets to dist folder
33 Fixing the imports in courses page
Additional Optimizations
34 Optimization section introduction
35 What is code splitting
36 Analyzing the Webpack build
37 Webpack split chunk
38 Lazy loading Dynamic imports
39 Adding hash to output bundle files
Production Build and Deployment configurations
40 Production Optimization section introduction
41 Extract CSS from HTML
42 Shimming
43 Remove dead CSS
44 Tree shaking Webpack Production mode
45 Production vs Development mode
46 Splitting webpack configuration part 1
47 Splitting webpack configuration part 2
Build a React single page application
48 Section introduction React app using Webpack
49 Basic HTML and JS configuration
50 Define Entry Output configurations
51 Adding Loaders Dev server configurations
52 Adding Babel loader
53 Fixing our routing issue
54 Post CSS Loaders configuration
55 ESLint configuration
Micro frontends using Webpack Module Federation
56 Section introduction Microfrontends
57 Why Microfrontends
58 Microfrontends project introduction
59 Starting of applications servers
60 Module federation basics
61 Exposing components
62 Fetching movies data to homepage
63 Importing remote components
64 Rendering all movies list
65 Exercise Use the Typography component
66 Initialise more Microfrontends
67 Setup movie app base
68 Adding homepage to movie app
69 Fixing the rendering issue
70 Adding details page and booking route
71 Navigating to the details page
72 Passing movie id as the path path parameter
73 Navigating via quick booking
74 State management introduction
75 RXJS basics
76 Publishing booking data to ovservable
77 Consuming the event on booking page
78 Rendering the data on booking page
79 Publish booking and routing data to details page
80 Microfrontend conclusion
81 Course Conclusion
BONUS Nodejs basics
82 Managing System Environment
83 NodeJS Path Module
84 Regular Expressions
Resolve the captcha to access the links!