CourseFlix

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

Course content

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

Related courses

  • Webpack 4: Beyond the Basics thumbnail

    Webpack 4: Beyond the Basics

    By: Udemy
    Welcome to the web hacker's cookbook for building modern javascript applications using the Webpack module loader and asset bundler. I aim to make this Beyond th
    5 hours 26 minutes 56 seconds
  • AngularJS and Webpack for Modular Applications thumbnail

    AngularJS and Webpack for Modular Applications

    By: egghead.io
    How much work would it take for you to move all of your directives and their templates to several different new directories?
    43 minutes 56 seconds

Frequently asked questions

What is Webpack 5 in 2023 The Complete Guide For Beginners about?
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…
Who teaches Webpack 5 in 2023 The Complete Guide For Beginners?
Webpack 5 in 2023 The Complete Guide For Beginners is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Webpack 5 in 2023 The Complete Guide For Beginners?
Webpack 5 in 2023 The Complete Guide For Beginners contains 59 lessons with a total runtime of 4 hours 46 minutes. All lessons are available to watch online at your own pace.
Is Webpack 5 in 2023 The Complete Guide For Beginners free to watch?
Webpack 5 in 2023 The Complete Guide For Beginners is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Webpack 5 in 2023 The Complete Guide For Beginners online?
Webpack 5 in 2023 The Complete Guide For Beginners is available to watch online on CourseFlix at https://courseflix.net/course/webpack-5-in-2023-the-complete-guide-for-beginners. The page hosts every lesson with the integrated video player; no download is required.