Webpack 5 Ninja (2022) - Build Micro frontend and web apps
- Description
- Curriculum
- FAQ
- Reviews
Webpack 5 Ninja – Build Nodejs and Web apps complete guide
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.
You can always ask me questions in the Q&A sections in case you face problems, I shall be happy to answer.
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.
Good luck and happy learning!
-
1IntroductionVideo lesson
-
2What is WebpackVideo lesson
-
3Software installationsVideo lesson
-
4Understanding basic conceptsVideo lesson
-
5Download Course code repositoryText lesson
-
6***IMP*** Source Code downloadVideo lesson
-
7Basic HTML Javascript SetupVideo lesson
-
8Adding webpack configurationVideo lesson
-
9Fixing our button clickVideo lesson
-
10CommonJS modulesVideo lesson
-
11ES6 ModulesVideo lesson
-
26Section overview Webpack WebsiteVideo lesson
-
27Install dependencies via NPMVideo lesson
-
28Basic Webpack configVideo lesson
-
29CSS | SCSS loaders setupVideo lesson
-
30Dev server setupVideo lesson
-
31Analyse the issueVideo lesson
-
32Copy assets to dist folderVideo lesson
-
33Fixing the imports in courses pageVideo lesson
-
40Production Optimization section introductionVideo lesson
-
41Extract CSS from HTMLVideo lesson
-
42ShimmingVideo lesson
-
43Remove dead CSSVideo lesson
-
44Tree shaking | Webpack Production modeVideo lesson
-
45Production vs Development modeVideo lesson
-
46Splitting webpack configuration part - 1Video lesson
-
47Splitting webpack configuration part - 2Video lesson
-
48Section introduction React app using WebpackVideo lesson
-
49Basic HTML and JS configurationVideo lesson
-
50Define Entry , Output configurationsVideo lesson
-
51Adding Loaders | Dev server configurationsVideo lesson
-
52Adding Babel loaderVideo lesson
-
53Fixing our routing issueVideo lesson
-
54Post CSS Loaders configurationVideo lesson
-
55ESLint configurationVideo lesson
-
56Section introduction Micro-frontendsVideo lesson
-
57Why Micro-frontendsVideo lesson
-
58Micro-frontends project introductionVideo lesson
-
59Starting of applications serversVideo lesson
-
60Module federation basicsVideo lesson
-
61Exposing componentsVideo lesson
-
62Fetching movies data to homepageVideo lesson
-
63Importing remote componentsVideo lesson
-
64Rendering all movies listVideo lesson
-
65Exercise: Use the Typography componentVideo lesson
-
66Initialise more Micro-frontendsVideo lesson
-
67Setup movie app baseVideo lesson
-
68Adding homepage to movie appVideo lesson
-
69Fixing the rendering issueVideo lesson
-
70Adding details page and booking routeVideo lesson
-
71Navigating to the details pageVideo lesson
-
72Passing movie id as the path path parameterVideo lesson
-
73Navigating via quick bookingVideo lesson
-
74State management introductionVideo lesson
-
75RXJS basicsVideo lesson
-
76Publishing booking data to ovservableVideo lesson
-
77Consuming the event on booking pageVideo lesson
-
78Rendering the data on booking pageVideo lesson
-
79Publish booking and routing data to details pageVideo lesson
-
80Micro-frontend conclusionVideo lesson
-
81Course ConclusionVideo lesson
External Links May Contain Affiliate Links read more