Development
Web Development
Webpack
Webpack 4 in 2020: The Complete Tutorial For Beginners
4.5 (1,763 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,854 students enrolled

Webpack 4 in 2020: The Complete Tutorial For Beginners

Learn Webpack 4 from the very basics to advanced! Use Webpack with JS, CSS, npm, Babel, Node
4.5 (1,763 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,854 students enrolled
Created by Viktor Pyskunov
Last updated 4/2020
English
English [Auto]
Preview this course
Webpack 4 in 2020: The Complete Tutorial For Beginners
Current price: $23.99 Original price: $39.99 Discount: 40% off
2 days left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 5 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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 4, 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.
Course content
Expand all 52 lectures 03:30:26
+ – Introduction
2 lectures 04:24

Introduction to the course

Introduction
Preview 02:08

In this video we will talk about what you need in order to succeed in this course.

What you need for this course
Preview 02:16
+ – Initial Setup and Integrating Webpack
5 lectures 16:35

In this video we will answer the question why  we need Webpack in JS applications.

Why Do We Need Webpack
Preview 02:09

In this video, we are going to create a basic setup for the future videos.

Setting Up Our Application
Preview 04:38

In this video we will install webpack and integrate it with NPM (Node package manager), to be able to run webpack build in a more convenient way. We will also create our first webpack config.

Install Webpack And Integrate It With NPM
Preview 04:53

Small Note about Github Repository

Small Note about Github Repository
00:22

In this video we will integrate Webpack with our JS application. We will use ES6 modules in Webpack in order to import dependencies.

Integrating Webpack Into Our JS Application
Preview 04:33
+ – Loaders
6 lectures 30:48

We will learn what a webpack loader is and why we need loaders.

What Is Webpack Loader?
Preview 00:54

In this video we will learn how to import images using Webpack. We will also learn how to use our first webpack loader - file-loader.

Handling Images With Webpack
Preview 08:08

In this video we will continue talking about importing images using Webpack. You will also learn how to use publicPath.

Handling Images With Webpack. How To Use publicPath
02:44

In Webpack it is possible to import CSS files directly inside your JS files! If you use css loader.

Handling CSS With Webpack
Preview 09:28

In this video we will learn how to import SASS files with Webpack. Adding sass loader to Webpack config.

Handling SASS
03:35

We will integrate Babel 7 into Webpack and learn how we can use latest cutting edge JavaScript features in our applications, even though they are not implemented in all major browsers yet.

Using Latest JavaScript Features With Babel 7
05:59
+ – Plugins
10 lectures 41:46

Introduction to Webpack plugins. You will learn what Webpack plugin is and why we need them.

What Is Webpack Plugin?
01:02

We will learn how to make the size of the resulting Webpack bundle smaller and faster to download.

Minification Of The Resulting Webpack Bundle
03:30

We will learn how to extract all CSS into a separate CSS file. In order to do that, we will use mini-css-extract-plugin which only became available in Webpack 4.

Extracting CSS Into a Separate Bundle With mini-css-extract-plugin, Part 1
05:01

We will learn how to extract all CSS into a separate CSS file. In order to do that, we will use mini-css-extract-plugin which only became available in Webpack 4.

Extracting CSS Into a Separate Bundle, Part 2
05:06

We will talk about browser caching and how Webpack helps us with that.

Browser Caching
05:32

When using bundle names with hashes, dist folder becomes cluttered quite fast. In this video we will see how to clean our dist folder
before generating new bundles.

How To Clean Dist Folder Before Generating New Bundles
05:28

We will learn how to generate HTML files automatically during each build and include JavaScript and CSS bundles inside.

Generating HTML Files Automatically During Webpack Build Process
05:44

We will learn how to pass custom options while generating HTML files.

Customizing Generated HTML Files
03:23

We will learn how to create our own template for generating HTML files.

Integration with Handlebars
06:03
More Webpack Plugins
00:57
+ – Production vs Development Builds
5 lectures 15:11

Introduction to "Production vs Development Builds" Section

Introduction
00:32

Here we will talk about the "mode" option.

Mode
04:06

I will show you how to manage effectively different Webpack configurations for production and development builds.

Managing Webpack Config for Production and Development Use Cases
04:44

We will configure webpack-dev-server in order to make our development process faster and more comfortable.

Faster Development with webpack dev server
05:05

Let's clean up a bit before we continue with the next section.

Cleaning Up A Bit
00:44
+ – Multiple Page Applications
7 lectures 34:13

Introduction to Multiple Page Applications.

Introduction
01:08

In this video we will create a KiwiImage component which will be used on our 2nd page.

Creating KiwiImage Component
04:42

In this video we will talk how we can create more than one JavaScript bundle.

Code Splitting in Webpack: Multiple JS and CSS Bundles
05:35

We will learn how to generate multiple HTML files for multiple pages, and how to include different JavaScript and CSS bundles inside different HTML files.

How To Generate Multiple HTML Files
05:18

In this video we will learn how to handle effectively common dependencies between multiple pages and multiple JavaScript bundles.

Extracting Common Dependencies While Code Splitting
08:57

We will learn how to provide custom options for code splitting.

Setting Custom Options for Code Splitting
03:38

In this video, we will learn how to setup development environment for multiple page applications.

How To Setup Development Environment For Multiple Page Application
04:55
+ – Github Repository
1 lecture 05:16

In this video I will show you how you can use Github repository associated with this course.

How To Use Github Repository
05:16
+ – Webpack Integration With Node And Express
7 lectures 17:47

We will talk about why we may need Express.js in our application.

Introduction
00:58
Getting Code for Single Page Application
00:25

We will talk about how to integrate Express.js into a Single Page Application.

Integrating Express Into Our Application
04:22

In this video we will modify our simple web server in order to serve our own HTML page.

Serving HTML Pages via Express
05:35

We will teach Express.js how to handle static files.

Handling JS and CSS via Express
02:56
Getting Code for Multiple Page Application
00:24

We will learn how to integrate Express.js into Multiple Page Applications.

Integrating Express.js Into A Multiple Page Application
03:06
+ – Integration with jQuery
2 lectures 04:36
Getting the Source Code
00:30

In this video we will integrate jQuery into Webpack.

Integration with jQuery
04:06
+ – Using Custom Fonts with Webpack
1 lecture 12:00

In this video you will learn how to use custom fonts with Webpack.

Using Custom Fonts with Webpack
12:00
Requirements
  • Basics of JavaScript
  • Basics of HTML
Description

My main goal is to help you understand and master Webpack, particularly its latest version Webpack 4. 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 JS 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!

Who this course is for:
  • All developers with basic JavaScript knowledge
Featured review
Juanfe Vásquez
Juanfe Vásquez ( 26 courses, 8 reviews )
12 months ago
Great course, specially considering that the vast majority of webpack related tutorials on the web are outdated. This course won't make you a webpack ninja, but it will build the foundations necessary to start your web projects and enable you to do deeper research on your own (many times it is about asking the right question and you need good foundations to ask proper questions).