Webpack 5 in 2023 The Complete Guide For Beginners

4h 46m 53s
English
Paid

Discover the power of Webpack with our comprehensive course designed to take you from a beginner to a confident user of the latest Webpack version. Whether you're new to Webpack or looking to deepen your understanding, this course provides a structured approach to building a robust, production-ready Webpack configuration from scratch. We'll start with the basics and progress to more advanced topics, ensuring each lesson builds on the last for seamless learning.

Course Objectives

By the end of this course, you will be proficient in utilizing Webpack in your projects. This includes creating and enhancing your own Webpack configurations. The course also covers npm and Babel for implementing the latest JavaScript technologies. If you've previously worked on a project with Webpack without altering the configuration, this course will empower you to customize and optimize it with confidence.

The course is regularly updated to include the latest Webpack features, guaranteeing current and relevant content. Should you have any inquiries about Webpack, the Q&A section is an excellent resource for getting answers. You'll learn to navigate and improve upon the default configurations found in most React and Angular boilerplates.

Course Requirements

Requirements:
  • Basic knowledge of JavaScript
  • Basic knowledge of HTML

Target Audience

Who this course is for:
  • All developers with basic JavaScript knowledge

What You'll Learn

  • Quick start with focused, concise lessons.
  • Build a fully functional, production-ready Webpack configuration from scratch.
  • Comprehend how Webpack operates and when to apply it.
  • Optimize your production builds for compactness and speed.
  • Enhance development with Hot Module Replacement and improved error handling.
  • Thorough exploration of Webpack loaders and plugins.
  • Implement cutting-edge JS features with Webpack 5, Babel 7, and npm.
  • Organize code effectively with ES6 modules and Webpack Code Splitting.
  • Understand and refine existing Webpack configurations.
  • Integrate Webpack with Node.js and Express framework.
  • Utilize Webpack for both Single Page Applications and Multiple Page Applications.
  • Establish a solid foundation for advanced Webpack topics.
  • Import CSS directly into JavaScript files using Webpack.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 59 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 59 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (59)
#Lesson TitleDurationAccess
1
Introduction Demo
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
Unlock unlimited learning

Get instant access to all 58 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription