Webpack 5- Optimizing For Production

Webpack 5: Optimizing For Production, available at $79.99, has an average rating of 4.65, with 60 lectures, based on 368 reviews, and has 3728 subscribers.

You will learn about Quickly get started, without long introductions and rambling Optimize your Webpack builds for Production in order to make them as small and efficient as possible Optimize your application loading times to make them as fast as possible Get familiar with 7 ways of handling CSS in your apps (including CSS-in-JS and CSS Modules) Learn everything you need to know about Code Splitting and Lazy Loading Optimize your CSS and Images for Production Configure Gzip compression and Brotli compression Set up Babel the right way Add Source Maps both for JavaScript and CSS Configure TypeScript with Webpack Optimize your Developer Experience by enabling Hot Module Replacement, better Error Handling, etc This course is ideal for individuals who are All developers with basic JavaScript knowledge It is particularly useful for All developers with basic JavaScript knowledge.

Enroll now: Webpack 5: Optimizing For Production

Summary

Title: Webpack 5: Optimizing For Production

Price: $79.99

Average Rating: 4.65

Number of Lectures: 60

Number of Published Lectures: 60

Number of Curriculum Items: 60

Number of Published Curriculum Objects: 60

Original Price: $29.99

Quality Status: approved

Status: Live

What You Will Learn

Quickly get started, without long introductions and rambling

Optimize your Webpack builds for Production in order to make them as small and efficient as possible

Optimize your application loading times to make them as fast as possible

Get familiar with 7 ways of handling CSS in your apps (including CSS-in-JS and CSS Modules)

Learn everything you need to know about Code Splitting and Lazy Loading

Optimize your CSS and Images for Production

Configure Gzip compression and Brotli compression

Set up Babel the right way

Add Source Maps both for JavaScript and CSS

Configure TypeScript with Webpack

Optimize your Developer Experience by enabling Hot Module Replacement, better Error Handling, etc

Who Should Attend

All developers with basic JavaScript knowledge

Target Audiences

All developers with basic JavaScript knowledge

Hi guys and girls, nice to see you here 馃檪 This is my 2nd course about Webpack, and this time my goal is to help you understand how you can optimize your Webpack configurations for production use cases. In this course we are going to focus on how to make your Webpack bundles as small as possible, and how to make your application loading times as fast as possible.

This course is specifically designed for those people who already know some Webpack basics, and want to become experts in creating optimized Webpack configurations from scratch as well as improving existing Webpack configurations.

In this course we are going to take an existing web application that’s not using any kind of module bundlers, and apply various Webpack features in order to optimize this application and improve its loading performance. This means you will see how Webpack works in real world use cases. Each lesson builds on top of the previous ones, so it鈥檚 very easy to follow.

Here are just a few examples of what we are going to talk about.

In one of the sections, I will show you 7 different approaches of handling CSS in your applications, including CSS Modules and a couple of CSS-in-JS libraries. As a result, you will become familiar with many approaches and you will be able to choose the most suitable one for your specific needs.

In another section, we are going to have a long discussion about Code Splitting and Lazy Loading. Webpack is extremely good at Code Splitting, and we are going to talk about that a lot in this course. I will show you multiple Code Splitting strategies you can apply, and we will even define our own strategy applicable to the application we are developing in this course. After watching this course you won’t ever be frustrated when you hear the words “Code Splitting” again.

Also, we are going to cover topics related to Optimizing Images for Production, Tree Shaking, Compression algorithms, and many more! After watching this course you will definitely have some ideas on how to improve performance of your existing web applications. I can also promise that you will know more about Webpack than the average Front End Developer in your company.

I am regularly updating this course, so you can be sure that this course is always up-to-date and covers the latest Webpack features.

If you have any questions related to Webpack, feel free to post them in Q&A section. Many people have already found answers to their questions in Q&A, and I will be more than happy to help you with your questions as well.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: What you need for this course

Chapter 2: Setting Up Webpack

Lecture 1: Setting Up Application

Lecture 2: Quick Note About The Github Repository

Lecture 3: Integrating Webpack Into The Application

Lecture 4: Default Webpack Configuration

Lecture 5: Separating Code Into Multiple Files

Lecture 6: Different Configurations for Production and Development Builds

Lecture 7: Setting Up Webpack-Dev-Server

Chapter 3: 7 Ways Of Using CSS With Webpack

Lecture 1: Introduction To Different Ways Of Handling Styles

Lecture 2: Using Regular CSS With Webpack. Brief Info About Loaders

Lecture 3: Extracting Generated CSS Into a Separate Bundle

Lecture 4: Generating HTML Based On Your Custom Template

Lecture 5: Removing Old Bundles Before Generating New Ones

Lecture 6: Another Way Of Removing Old Bundles

Lecture 7: CSS Modules

Lecture 8: Optimizing Your CSS For Production

Lecture 9: Using Less Preprocessor For Writing Your Styles

Lecture 10: Using Sass Together With Webpack

Lecture 11: Using PostCSS

Lecture 12: Removing Unused CSS From The Generated Bundles

Lecture 13: Introduction To CSS-in-JS

Lecture 14: Using JSS

Lecture 15: Using Emotion (Another CSS-in-JS Library)

Chapter 4: Processing Images With Webpack

Lecture 1: Introduction To Processing Images

Lecture 2: Processing Images In Development Mode

Lecture 3: Optimizing Images For Production

Lecture 4: One More Way Of Optimizing Images

Lecture 5: Processing Large Amounts of Images

Lecture 6: Generating WEBP Images Out Of JPEG or PNG

Lecture 7: Quick Note About Optimizing Images

Chapter 5: Increasing Browser Support With Babel

Lecture 1: Setting Up Babel Compiler

Lecture 2: Increasing Your Browser Support With Polyfills

Lecture 3: Different Babel Configurations For Production And Development Purposes

Lecture 4: Passing Environment Variables

Lecture 5: Using Experimental JavaScript Features In Your Application

Lecture 6: Setting Up TypeScript

Chapter 6: Improving Your Developer Experience With Source Maps

Lecture 1: Source Maps For JavaScript And CSS

Lecture 2: Source Maps For CSS-in-JS Libraries

Chapter 7: Tree Shaking

Lecture 1: How Tree Shaking Works. Simple Example

Lecture 2: Applying Tree Shaking To Our Application

Chapter 8: Applying Code Splitting and Lazy Loading To Your Production Code

Lecture 1: Adding Bootstrap In Case You Need It

Lecture 2: How To Analyze Bundles Generated By Webpack

Lecture 3: Strategy #1: Extracting Heavy Dependencies Into Separate Bundles

Lecture 4: Strategy #2: Specifying Criteria For Code Splitting

Lecture 5: Strategy #3: Putting node_modules Into Its Own Bundle

Lecture 6: Strategy #4: Creating a JS Bundle For Each Dependency

Lecture 7: Define Your Own Strategy For Code Splitting

Lecture 8: Lazy Loading

Lecture 9: Lazy Loading Multiple Modules In Parallel

Lecture 10: Using Async Await With Lazy Loaded Modules

Chapter 9: Creating Your Own Web Server

Lecture 1: Why You May Need a Web Server

Lecture 2: Setting Up Express Framework

Lecture 3: Integrating Express Framework Into The Application

Lecture 4: Implementing Watch Functionality And Automatic Rebuilds

Lecture 5: Implementing Hot Module Replacement

Chapter 10: Compressing Your Production Code Before Sending It To Your Customers

Lecture 1: Enable Gzip Compression in Webpack

Lecture 2: Configure Your Web Server To Support Gzip

Lecture 3: Enable Brotli Compression

Chapter 11: Summary

Lecture 1: Summary

Instructors

Viktor Pyskunov
Senior Software Developer

Rating Distribution

1 stars: 0 votes

2 stars: 4 votes

3 stars: 16 votes

4 stars: 90 votes

5 stars: 254 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!