Webpack 5 and Vite: A New Way to Learn - Active Thinking

In this lesson, we will create our first Webpack project. But do NOT read the manual yet! Feel in the darkness and make guesses based on common sense. This process forces you to think for yourself. You will be rewarded with a deeper understanding of Webpack.

We won't create any config file; instead, we will adapt our source files to meet the default setting of Webpack. This way, you will develop a deeper understanding of how Webpack works.

In this lesson, we will create our first Webpack config file.

Do NOT read the manual! Try to reverse-engineer based on what we have learned about Webpack in the previous lesson. The error messages and warnings are your best friend. They help you figure out what's wrong and what Webpack expects.

This is the original first Webpack lesson, where we teach Webpack from ground zero, directly telling what to do and what to avoid.

But doing so deprives you of the opportunity for active thinking. Passively receiving information is not the best way to learn.

If you are completely new to Webpack and find the previous two lessons too challenging, you can watch this lesson instead.

In this lesson, we will show you how to limit the range of files monitored by Webpack. Watching fewer files lowers the burden of Webpack, improving the overall performance.

The webpack dev server monitors source files and automatically re-bundle.

The "public" directory is where Webpack serves static files.

In the final bundled file, the same code only has one copy. Removing duplicated codes helps reduce the size of the bundled file.

Multi-page application.

Unneeded codes from source files won't show up in the bundled files. This is known as tree shaking, a measure to reduce the size of bundled files.

Despite its name, the side effect is not a bad thing and can be easily avoided.

This is a preparation course for lazy loading. Lazy loading is built on the ES6 dynamic import.

"Lazy loading" means only loading a file when it is needed. It is built on the ES6 dynamic import. Webpack detects the ES6 dynamic import automatically and "lazy loads" the dynamically imported file.

The "splitChunksPlugin" is a native Webpack plugin. It splits codes from the bundled JS and injects them into an independent file. It enables lazy loading.

The "htmlWebpackPlugin" is a third-party plugin. It helps generate an HTML file to host the bundled JS file.

The "htmlWebpackPlugin" supports multi-page apps. It can generate several HTML files to host different bundled JS files.

This plugin helps make a dependency, mainly an NPM package, global. But it is recommended you do not use this plugin.

In this lesson, we will you how to deal with non-JS files. "File-loader," the previously most commonly used Webpack loader, has been replaced by "asset modules." The "raw-loader" and "url-loader" have been replaced as well.

In this lesson, we will show you how to convert a file into a data URI.

We can set a custom public path in every "asset mdule."

In this lesson, we will learn how to work with CSS files. We retrieve CSS codes and inject them into the "style" tag.

In this lesson, we will inject retrieved CSS codes into independent CSS files. In the meanwhile, the retrieved CSS codes will be minified to reduce the file size.

A CSS dependency of a "lazy-loaded" file will be "lazy-loaded" as well.

The bundling process can incorporate the translation of syntax. For example, we can "bundle" a SASS file into an ordinary CSS that can be understood by browsers.

The "public path" decides how bundled files are deployed. 

Very often, we need different configurations for the dev server and the final bundling. In this case, we can split the config file.

A challenge to test your command of Webpack.