English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 66 lectures (4h 50m) | 1.55 GB
Learn Webpack 5 from the very basics to advanced! Use Webpack with JS, CSS, NPM, Module Federation and Micro Frontends.
My main goal is to help you understand and master Webpack, particularly its latest version Webpack 5! This course was specifically designed for those who want to learn Webpack from scratch, and for those who are already working with Webpack, but don’t fully understand how it works.
In this course we will build fully functional, production ready Webpack configuration from scratch. We will start from the very simple things and then gradually move towards more advanced topics. Each lesson builds on top of the previous ones, so it is easy to follow.
After this course you will definitely be able to use Webpack in your projects. You will be able to create your own Webpack configurations and improve existing ones. We will also cover using NPM and Babel in this course in order to use the latest JavaScript technologies. If you worked on a project with Webpack, but never touched the configuration, after this course you will be able to touch it, and even improve it 🙂
I am constantly updating this course, so you can always be sure that it is up-to-date and covers the latest features of Webpack.
If you have any questions regarding Webpack, feel free to post them in the Q&A section. Many people have already found answers to their questions there, and I will do my best to help you with your questions as well.
Most React and Angular boilerplates come with Webpack included, and most people are afraid to touch its default configuration. I strongly believe that you should not be scared of it. You should master it!
What you’ll learn
- Quickly get started, without long introductions and rambling.
- Create fully functional, production ready Webpack 5 config from scratch.
- Get a solid understanding how Webpack really works and when to use it.
- Optimize your Webpack production builds to be small and fast.
- Optimize your development experience by enabling Hot Module Replacement, better Error Handling, etc.
- Deep dive into Webpack 5 Asset Modules, Loaders and Plugins.
- Use latest cutting edge JS features with Webpack 5, Babel 7, and npm.
- Organize your code better with EcmaScript 6 modules and Webpack Code Splitting.
- Be able to understand and improve existing Webpack configurations.
- Integrate Webpack 5 with Node JS and Express framework.
- Use Webpack for Single Page Applications as well as Multiple Page Applications.
- Get a solid foundation for learning advanced Webpack features.
- Master the new Module Federation feature introduced in Webpack 5.
Table of Contents
Introduction
1 Introduction
2 What you need for this course
Initial Setup and Integrating Webpack
3 Why Do We Need Webpack
4 Setting Up Our Application
5 Install Webpack And Integrate It With NPM
6 Small Note about Github Repository
7 Integrating Webpack Into Our JS Application
8 Custom Webpack Configuration
Asset Modules
9 Introduction to Asset Modules
10 Handling Images With Webpack
11 publicPath
12 Assetinline Module Type
13 General Asset Type
14 Assetsource Module Type
Loaders
15 What Is Webpack Loader
16 Handling CSS With Webpack
17 Handling SASS
18 Using Latest JavaScript Features With Babel
19 Experimental JavaScript Features
Plugins
20 What Is Webpack Plugin
21 Minification of the Resulting Webpack Bundle
22 Extracting CSS Into a Separate Bundle With minicssextractplugin Part 1
23 Extracting CSS Into a Separate Bundle Part 2
24 Browser Caching
25 How To Clean Dist Folder Before Generating New Bundles
26 Generating HTML Files Automatically During Webpack Build Process
27 Customizing Generated HTML Files
28 Integration with Handlebars
29 More Webpack Plugins
Production vs Development Builds
30 Introduction
31 Mode
32 Managing Webpack Config for Production and Development Use Cases
33 Faster Development with webpack dev server
34 Cleaning Up A Bit
Multiple Page Applications and Code Splitting
35 Introduction
36 Creating KiwiImage Component
37 Code Splitting in Webpack Multiple JS and CSS Bundles
38 How To Generate Multiple HTML Files
39 Extracting Common Dependencies While Code Splitting
40 Setting Custom Options for Code Splitting
41 How To Setup Development Environment For Multiple Page Application
Github Repository
42 How To Use Github Repository
Webpack Integration With Node And Express
43 Introduction
44 Getting Code for Single Page Application
45 Integrating Express Into Our Application
46 Serving HTML Pages via Express
47 Handling JS and CSS via Express
48 Getting Code for Multiple Page Application
49 Integrating Expressjs Into A Multiple Page Application
Module Federation
50 Creating 2 Separate Applications Part 1
51 Creating 2 Separate Applications Part 2
52 Setting Up Module Federation
53 Consuming Federated Modules
54 Modules Are Loaded At Runtime
55 Creating Micro Frontends
56 Micro Frontends In Action Part 1
57 Micro Frontends In Action Part 2
58 Navigation Bar Component
59 Nested Module Federation Part 1
60 Nested Module Federation Part 2
Integration with jQuery
61 Getting the Source Code
62 Integration with jQuery
Using ESLint
63 Configuring ESLint
64 More hints about ESLint
Summary
65 Summary
66 Bonus Lecture
Resolve the captcha to access the links!