CF

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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
To enroll in this course, you should have a basic knowledge of JavaScript and HTML. These foundational skills will help you understand the concepts and exercises related to Webpack configuration and usage that are covered throughout the course.
What kind of projects will I build during the course?
During the course, you will work on projects that involve creating and customizing Webpack configurations. You'll learn to handle assets like images and CSS, integrate Webpack with npm, and set up a development environment using tools such as the webpack dev server. Additionally, you'll explore advanced topics like module federation and micro frontends.
Who is the target audience for this course?
This course is designed for developers who have a basic understanding of JavaScript. Whether you're new to Webpack or looking to improve your skills, this course offers a structured approach to mastering Webpack configurations and optimizing them for production use.
How does the depth and scope of this course compare to others?
The course provides a comprehensive exploration of Webpack, covering everything from basic setup to advanced features like code splitting and micro frontends. It includes 59 lessons, ensuring that you not only learn how to configure Webpack but also understand its integration with other tools like Babel and npm.
What specific tools and platforms will I learn to use in this course?
You'll learn to use Webpack alongside npm for managing packages and Babel for implementing the latest JavaScript features. The course also covers integrating Webpack with popular frameworks like React and Angular through boilerplates, and using plugins like mini-css-extract-plugin for CSS handling.
What topics are not covered in this course?
The course does not cover advanced JavaScript programming or specific front-end frameworks in detail beyond their integration with Webpack. It focuses specifically on mastering Webpack configurations and related tools, rather than broader web development concepts.
How much time should I expect to commit to complete this course?
The course consists of 59 lessons, each designed to build on the previous one. While the exact runtime is not specified, prospective students should anticipate dedicating a substantial amount of time to fully grasp the material and complete the exercises, given the course's comprehensive nature.