Webpack 5: The Complete Guide For Beginners

Webpack 5: The Complete Guide For Beginners

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 4 Hours | 1.50 GB


Learn Webpack 5 from the very basics to advanced! Use Webpack with JS, CSS, npm, Babel, Node

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!

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 5, 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.


+ Table of Contents

Introduction
1 Introduction
2 What you need for this course

Initial Setup and Integrating Webpack
3 Why Do We Need Webpack
4 Setting Up Our Application
5 Install Webpack And Integrate It With NPM
6 Small Note about Github Repository
7 Integrating Webpack Into Our JS Application
8 Custom Webpack Configuration

Loaders
9 What Is Webpack Loader
10 Handling Images With Webpack
11 Handling Images With Webpack. How To Use publicPath
12 Handling CSS With Webpack
13 Handling SASS
14 Using Latest JavaScript Features With Babel 7

Plugins
15 What Is Webpack Plugin
16 Minification Of The Resulting Webpack Bundle
17 Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1
18 Extracting CSS Into a Separate Bundle, Part 2
19 Browser Caching
20 How To Clean Dist Folder Before Generating New Bundles
21 Generating HTML Files Automatically During Webpack Build Process
22 Customizing Generated HTML Files
23 Integration with Handlebars
24 More Webpack Plugins

Production vs Development Builds
25 Introduction
26 Mode
27 Managing Webpack Config for Production and Development Use Cases
28 Faster Development with webpack dev server
29 Cleaning Up A Bit

Multiple Page Applications
30 Introduction
31 Creating KiwiImage Component
32 Code Splitting in Webpack Multiple JS and CSS Bundles
33 How To Generate Multiple HTML Files
34 Extracting Common Dependencies While Code Splitting
35 Setting Custom Options for Code Splitting
36 How To Setup Development Environment For Multiple Page Application

Github Repository
37 How To Use Github Repository

Webpack Integration With Node And Express
38 Introduction
39 Getting Code for Single Page Application
40 Integrating Express Into Our Application
41 Serving HTML Pages via Express
42 Handling JS and CSS via Express
43 Getting Code for Multiple Page Application
44 Integrating Express.js Into A Multiple Page Application

Module Federation
45 Creating 2 Separate Applications, Part 1
46 Creating 2 Separate Applications, Part 2
47 Setting Up Module Federation
48 Consuming Federated Modules
49 Modules Are Loaded At Runtime
50 Creating Micro Frontends
51 Micro Frontends In Action, Part 1
52 Micro Frontends In Action, Part 2
53 Navigation Bar Component

Integration with jQuery
54 Getting the Source Code
55 Integration with jQuery

Using Custom Fonts with Webpack
56 Using Custom Fonts with Webpack

Using FontAwesome with Webpack
57 Using FontAwesome with Webpack

Using ESLint
58 Configuring ESLint

Summary
59 Summary
60 Bonus Lecture