Webpack 5: The Complete Guide For Beginners

Focused View

Viktor Pyskunov

4:45:54

49 View

01 - Introduction

001 Introduction.mp4

02:41

002 What you need for this course.mp4

02:52

02 - Initial Setup and Integrating Webpack

001 Why Do We Need Webpack.mp4

02:50

002 Setting Up Our Application.mp4

04:35

003 Installing Webpack.mp4

03:11

004 Small Note about Github Repository.html

005 Integrating Webpack Into Our JS Application.mp4

04:38

006 Custom Webpack Configuration.mp4

06:53

external-links.txt

03 - Asset Modules

001 Introduction to Asset Modules.mp4

03:14

002 Handling Images With Webpack.mp4

07:00

003 publicPath.mp4

04:53

004 Assetinline Module Type.mp4

03:39

005 General Asset Type.mp4

03:40

006 Assetsource Module Type.mp4

02:39

04 - Loaders

001 What Is Webpack Loader.mp4

01:16

002 Handling CSS With Webpack.mp4

09:50

003 Handling SASS.mp4

03:54

004 Using Latest JavaScript Features With Babel.mp4

07:05

005 Experimental JavaScript Features.html

05 - Plugins

001 What Is Webpack Plugin.mp4

01:11

002 Minification of the Resulting Webpack Bundle.mp4

03:00

003 Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1.mp4

05:18

004 Extracting CSS Into a Separate Bundle, Part 2.mp4

04:22

005 Browser Caching.mp4

05:28

006 How To Clean Dist Folder Before Generating New Bundles.mp4

09:02

007 Generating HTML Files Automatically During Webpack Build Process.mp4

05:18

008 Customizing Generated HTML Files.mp4

03:07

009 Integration with Handlebars.mp4

06:04

010 More Webpack Plugins.mp4

01:07

06 - Production vs Development Builds

001 Introduction.mp4

00:37

002 Mode.mp4

04:29

003 Managing Webpack Config for Production and Development Use Cases.mp4

05:06

004 Faster Development with webpack dev server.mp4

05:07

005 Cleaning Up A Bit.mp4

00:44

07 - Multiple Page Applications and Code Splitting

001 Introduction.mp4

01:30

002 Creating KiwiImage Component.mp4

04:23

003 Code Splitting in Webpack Multiple JS and CSS Bundles.mp4

07:03

004 How To Generate Multiple HTML Files.mp4

06:34

005 Extracting Common Dependencies While Code Splitting.mp4

11:15

006 Setting Custom Options for Code Splitting.mp4

03:48

007 How To Setup Development Environment For Multiple Page Application.mp4

05:15

08 - Github Repository

001 How To Use Github Repository.mp4

05:46

external-links.txt

09 - Webpack Integration With Node And Express

001 Introduction.mp4

02:02

002 Getting Code for Single Page Application.html

003 Integrating Express Into Our Application.mp4

04:38

004 Serving HTML Pages via Express.mp4

04:50

005 Handling JS and CSS via Express.mp4

02:53

006 Getting Code for Multiple Page Application.html

007 Integrating Express.js Into A Multiple Page Application.mp4

03:42

10 - Module Federation

001 Creating 2 Separate Applications, Part 1.mp4

06:29

002 Creating 2 Separate Applications, Part 2.mp4

05:37

003 Setting Up Module Federation.mp4

07:25

004 Consuming Federated Modules.mp4

03:18

005 Modules Are Loaded At Runtime.mp4

02:28

006 Creating Micro Frontends.mp4

07:09

007 Micro Frontends In Action, Part 1.mp4

05:31

008 Micro Frontends In Action, Part 2.mp4

06:59

009 Navigation Bar Component.mp4

08:10

010 Nested Module Federation. Part 1.mp4

09:16

011 Nested Module Federation. Part 2.mp4

07:27

11 - Integration with jQuery

001 Getting the Source Code.html

002 Integration with jQuery.mp4

04:35

12 - Using ESLint

001 Configuring ESLint.mp4

11:15

002 More hints about ESLint.html

13 - Summary

001 Summary.mp4

01:46

002 Bonus Lecture.html

Description

Learn Webpack 5 from the very basics to advanced! Use Webpack with JS, CSS, NPM, Module Federation and Micro Frontends.

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.

Who is this for?

All developers with basic JavaScript knowledge

What You Need to Know?

Basics of JavaScript

Basics of HTML

More details

Description
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!
P. S. Made in Ukraine
Who this course is for:
All developers with basic JavaScript knowledge

User Reviews

Rating

average 0

Total votes0

Focused display

Web App Development

Viktor Pyskunov

Instructor's Courses

My name is Viktor and my goal is to help you understand stuff.I am a Senior Software Developer from Ukraine specializing in JavaScript and various technologies around it.I have been creating web applications for 15 years.During these years I acquired a lot of expertise in Software Development industry.Now I want to share my knowledge with you.I design my courses so they are easy to understand and to follow, and I update them regularly in order to keep them up-to-date.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.