Webpack 5: Optimizing For Production

In this video, we are going to create a basic setup for the future videos. We are going to clone the Github repository with initial code that we'll be using throughout this course.

Here I am explaining how to use Github Repository associated with this course. This Github Repository contains all the code related to all lessons.

In this video we are going to install Webpack and integrate it into the initial application we downloaded in the previous video.

In this video I will show you how the default Webpack configuration looks like.

In this video we are going to apply Separation of Concerns principle and separate our code into multiple files according to their domains.

Here we are going to talk about differences in purposes of Production and Development builds. We are also going to create different Webpack configurations, one for Production, and the other one for Development.

In this video we are going to set up Webpack-Dev-Server in order to improve the Developer Experience of those working on this application.

Introduction To Different Ways Of Handling Styles With Webpack.

In this video we are going to see how to handle regular CSS with Webpack.

In this video we are going to improve loading times of your app by extracting your CSS into a separate bundle.

Webpack is capable of generating custom HTML files based on your templates. In this video we are going to discover this possibility.

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

In this video, I am going to show you another way of cleaning your dist folder that works both in production and in development.

In this video you will learn how to handle CSS Modules with Webpack.

In this video we are going to have a look at how we can optimize our css that's generated by Webpack during the build process.

In this video we will learn how to use LESS preprocessor when writing your styles.

In this video you will see how you can set up SASS together with Webpack.

In this video we are going to talk about PostCSS.

In case you are using some kind of a CSS framework in your applications, you often end up including the whole CSS framework into your production code. In this video we are going to talk how to detect and remove those parts of production CSS code that's not used in your application.

In this video we are going to talk what CSS-in-JS is as well as touch some of the benefits of CSS-in-JS and its drawbacks.

In this video we are going to have a look at one of those implementations that's called JSS.

In this video we are going to have a look at one more CSS-in-JS library that's called Emotion.

This video is an introduction to a short section where we are going to talk about how to handle images via Webpack.

In this video I will show you how to configure Webpack in order to process images in development mode.

In this video we are going to see how we can optimize images in production mode.

In this video we are going to see 1 more way of how we can optimize images in production mode.

In this video we are going to see how Webpack can process dozens or even hundreds of images that are referenced dynamically.

In this video we are going to see how we can generate images in WEBP format.

In this video we are going to add Babel to our configuration. Babel is a JavaScript compiler that can convert ECMAScript 2015+ and above into a backwards compatible version of JavaScript that is supported in every browser out there.

In this video you will learn how to increase your browser support by adding polyfills for missing JavaScript features.

In this video you will see how you can specify different Babel configurations for production and development environments.

In this video you will see how you can specify Environment Variables in a way that works in all Operating Systems

In this video you will see how you can use experimental JavaScript features not supported by any browser yet.

In this video we are going to add TypeScript support in our application.

In this video we are going to set up Source Maps for our JavaScript and CSS code. You will also learn why you need Source Maps.

In this video you will see that you can configure Source Maps even for CSS-in-JS libraries.

In this video we are going to talk about the tree shaking feature in Webpack.

In this video we are going to apply tree shaking to our application and see if it gives any benefits.

In this video we are going to add a couple of heavy dependencies to our application just as an example. In the future videos I will show you how to optimize the application that's using multiple heavy dependencies.

In this video I will show you how you can analyze JavaScript bundles generated by Webpack in order to improve your code splitting strategy.

In this video you will learn how you can extract specific dependencies into separate bundles.

In this video you will see that Webpack can figure out by itself which modules should be generated as separate bundles, you just need to tell Webpack which criteria it should use.

In this video we are going to put all dependencies from the node_modules folder into a separate JavaScript bundle.

In this video we are going to put each dependency from node_modules folder into its own bundle.

In this video I am going to define my own strategy for the application we are building in this course.

In this video you are going to learn what Lazy Loading is about, and how you can configure lazy loading in your application.

In this video you will see that sometimes you need to lazy load multiple JavaScript modules at once.

In this video we are going to convert usages of lazy loaded modules to Async / Await.

In this video we are going to talk about why you may need a web server for your web application.

We are going to have a look at how to install Express Framework.

In this video we are going to modify our simple web server in order to serve our own HTML page together with JavaScript and CSS files.

In this video we are going to implement "compile and watch" functionality (similar to what Webpack Dev Server provides).

In this video we continue implementing the same functionality as provided by Webpack Dev Server. This time we are going to add Hot Module Reloading feature to our setup.

In this video we're going to learn how to enable gzip compression in Webpack.

In order to benefit from compressing generated bundles, you need to configure your Web Server accordingly.

In this video we are going to talk about Brotli compression as well as compare it to gzip compression.