Webpack 5 in 2023 The Complete Guide For Beginners

4h 46m 53s
English
Paid
November 22, 2023

My main goal is to help you understand and master Webpack, particularly its latest version Webpack 4. 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.

More

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

Requirements:
  • Basics of JavaScript
  • Basics of HTML
Who this course is for:
  • All developers with basic JavaScript knowledge

What you'll learn:

  • Quickly get started, without long introductions and rambling.
  • Create fully functional, production ready Webpack 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 loaders and plugins.
  • Use latest cutting edge JS features with Webpack 4, Babel 7, and npm.
  • Organize your code better with EcmaScript 2015 modules and Webpack Code Splitting.
  • Being able to understand and improve existing Webpack config.
  • Integrate Webpack with Node JS and Express framework.
  • Using Webpack for Single Page Applications as well as Multiple Page Applications.
  • Get a solid foundation for learning advanced Webpack features.
  • Import CSS into your JS files using Webpack.

Watch Online Webpack 5 in 2023 The Complete Guide For Beginners

Join premium to watch
Go to premium
# Title Duration
1 Introduction 02:42
2 What you need for this course 02:53
3 Why Do We Need Webpack 02:51
4 Setting Up Our Application 04:36
5 Install Webpack And Integrate It With NPM 03:12
6 Integrating Webpack Into Our JS Application 04:39
7 Custom Webpack Configuration 06:54
8 Introduction to Asset Modules 03:15
9 Handling Images With Webpack 07:01
10 publicPath 04:54
11 Asset/inline Module Type 03:40
12 General Asset Type 03:41
13 Asset/source Module Type 02:40
14 What Is Webpack Loader? 01:17
15 Handling CSS With Webpack 09:51
16 Handling SASS 03:55
17 Using Latest JavaScript Features With Babel 07:06
18 What Is Webpack Plugin? 01:12
19 Minification of the Resulting Webpack Bundle 03:01
20 Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1 05:19
21 Extracting CSS Into a Separate Bundle, Part 2 04:23
22 Browser Caching 05:29
23 How To Clean Dist Folder Before Generating New Bundles 09:03
24 Generating HTML Files Automatically During Webpack Build Process 05:19
25 Customizing Generated HTML Files 03:08
26 Integration with Handlebars 06:05
27 More Webpack Plugins 01:08
28 Introduction 00:38
29 Mode 04:30
30 Managing Webpack Config for Production and Development Use Cases 05:07
31 Faster Development with webpack dev server 05:08
32 Cleaning Up A Bit 00:45
33 Introduction 01:31
34 Creating KiwiImage Component 04:24
35 Code Splitting in Webpack: Multiple JS and CSS Bundles 07:04
36 How To Generate Multiple HTML Files 06:35
37 Extracting Common Dependencies While Code Splitting 11:16
38 Setting Custom Options for Code Splitting 03:49
39 How To Setup Development Environment For Multiple Page Application 05:16
40 How To Use Github Repository 05:47
41 Introduction 02:03
42 Integrating Express Into Our Application 04:39
43 Serving HTML Pages via Express 04:51
44 Handling JS and CSS via Express 02:54
45 Integrating Express.js Into A Multiple Page Application 03:43
46 Creating 2 Separate Applications, Part 1 06:30
47 Creating 2 Separate Applications, Part 2 05:38
48 Setting Up Module Federation 07:26
49 Consuming Federated Modules 03:19
50 Modules Are Loaded At Runtime 02:29
51 Creating Micro Frontends 07:10
52 Micro Frontends In Action, Part 1 05:32
53 Micro Frontends In Action, Part 2 07:00
54 Navigation Bar Component 08:11
55 Nested Module Federation. Part 1 09:17
56 Nested Module Federation. Part 2 07:28
57 Integration with jQuery 04:36
58 Configuring ESLint 11:16
59 Summary 01:47

Similar courses to Webpack 5 in 2023 The Complete Guide For Beginners

AngularJS and Webpack for Modular Applications

AngularJS and Webpack for Modular Applications

Duration 43 minutes 56 seconds
Webpack 4: Beyond the Basics

Webpack 4: Beyond the Basics

Duration 5 hours 26 minutes 56 seconds