Webpack 5: The Complete Guide For Beginners

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

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

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.

Small Note about Github Repository

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

In this video we are going to create a custom configuration for Webpack.

In this video we will learn how to import images using Webpack. We will also learn how to use our first Asset Module - asset/resource.

In this video you will learn about publicPath and how it helps with referencing static files in Webpack.

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

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

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

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.

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

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

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.

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.

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

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.

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

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

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

Introduction to "Production vs Development Builds" Section

Here we will talk about the "mode" option.

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

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

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

Introduction to Multiple Page Applications.

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

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

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.

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

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

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

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

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

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

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

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

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

We are going to create two standalone applications that can be run separately. We need that in preparation for the next videos.

We are going to create two standalone applications that can be run separately. We need that in preparation for the next videos.

We are going to set up Module Federation which is the new feature introduced in Webpack 5.

We are going to set up Module Federation which is the new feature introduced in Webpack 5.

We will see that federated modules are loaded at runtime.

In this video we are going to adjust our small applications so that they can be used as Micro Frontends.

In this video we are going to create the dashboard application  which will be referencing micro frontends  that we created in the previous video.

In this video we are going to create the dashboard application which will be referencing micro frontends  that we created in the previous video.

In this  video we are going to create a navigation bar component that will allow the user to switch between these micro frontends by clicking the corresponding link on the page.