Webpack 5 Ninja 2023 Build Micro frontend and web apps

Webpack 5 Ninja 2023 Build Micro frontend and web apps

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

Requirements

Basic HTML , Javascript skills would be good to have but not necessary
Follow along with the video , all resources are provided

Description

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.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!

Overview

Section 1: Introduction | Webpack Basics

Lecture 1 Introduction

Lecture 2 What is Webpack

Lecture 3 Software installations

Lecture 4 Understanding basic concepts

Lecture 5 Download Course code repository

Lecture 6 ***IMP*** Source Code download

Lecture 7 Basic HTML Javascript Setup

Lecture 8 Adding webpack configuration

Lecture 9 Fixing our button click

Lecture 10 CommonJS modules

Lecture 11 ES6 Modules

Section 2: Loading external data using Webpack

Lecture 12 Loaders Section Introduction

Lecture 13 What are loaders ?

Lecture 14 CSS loaders Part 1

Lecture 15 CSS loaders Part 2

Lecture 16 SCSS Loaders

Lecture 17 Loading images in JS

Lecture 18 Fonts loaders

Lecture 19 Loaders Recap

Section 3: Customization and Enhancement using Plugins

Lecture 20 Plugins section introduction

Lecture 21 Multiple entry bundle

Lecture 22 what are plugins ?

Lecture 23 Using HTML Webpack plugin

Lecture 24 Fixing our broken page

Lecture 25 Automated Reloading ( Dev Server )

Section 4: Build a full website using Webpack ( Course Project )

Lecture 26 Section overview Webpack Website

Lecture 27 Install dependencies via NPM

Lecture 28 Basic Webpack config

Lecture 29 CSS | SCSS loaders setup

Lecture 30 Dev server setup

Lecture 31 Analyse the issue

Lecture 32 Copy assets to dist folder

Lecture 33 Fixing the imports in courses page

Section 5: Additional Optimizations

Lecture 34 Optimization section introduction

Lecture 35 What is code splitting ?

Lecture 36 Analyzing the Webpack build

Lecture 37 Webpack split chunk

Lecture 38 Lazy loading | Dynamic imports

Lecture 39 Adding hash to output bundle files

Section 6: Production Build and Deployment configurations

Lecture 40 Production Optimization section introduction

Lecture 41 Extract CSS from HTML

Lecture 42 Shimming

Lecture 43 Remove dead CSS

Lecture 44 Tree shaking | Webpack Production mode

Lecture 45 Production vs Development mode

Lecture 46 Splitting webpack configuration part – 1

Lecture 47 Splitting webpack configuration part – 2

Section 7: Build a React single page application

Lecture 48 Section introduction React app using Webpack

Lecture 49 Basic HTML and JS configuration

Lecture 50 Define Entry , Output configurations

Lecture 51 Adding Loaders | Dev server configurations

Lecture 52 Adding Babel loader

Lecture 53 Fixing our routing issue

Lecture 54 Post CSS Loaders configuration

Lecture 55 ESLint configuration

Section 8: Micro frontends using Webpack Module Federation

Lecture 56 Section introduction Micro-frontends

Lecture 57 Why Micro-frontends

Lecture 58 Micro-frontends project introduction

Lecture 59 Starting of applications servers

Lecture 60 Module federation basics

Lecture 61 Exposing components

Lecture 62 Fetching movies data to homepage

Lecture 63 Importing remote components

Lecture 64 Rendering all movies list

Lecture 65 Exercise: Use the Typography component

Lecture 66 Initialise more Micro-frontends

Lecture 67 Setup movie app base

Lecture 68 Adding homepage to movie app

Lecture 69 Fixing the rendering issue

Lecture 70 Adding details page and booking route

Lecture 71 Navigating to the details page

Lecture 72 Passing movie id as the path path parameter

Lecture 73 Navigating via quick booking

Lecture 74 State management introduction

Lecture 75 RXJS basics

Lecture 76 Publishing booking data to ovservable

Lecture 77 Consuming the event on booking page

Lecture 78 Rendering the data on booking page

Lecture 79 Publish booking and routing data to details page

Lecture 80 Micro-frontend conclusion

Lecture 81 Course Conclusion

Section 9: BONUS: Nodejs basics

Lecture 82 Managing System Environment

Lecture 83 NodeJS Path Module

Lecture 84 Regular Expressions

Frontend developers,Backend developers,Devops for optimization

Course Information:

Udemy | English | 8h 26m | 8.64 GB
Created by: Gaurav Soni

You Can See More Courses in the IT & Software >> Greetings from CourseDown.com