How Webpack Works

As a rule, during development we get many JavaScript files containing various pieces of code. These can be parts of our code or third-party libraries. It turns out that we must connect each such file to the HTML file via the script tag.

This is not very good, as many connected files slow down the loading speed of the site. Therefore, to speed up the loading, you need to put all the code in one file.

However, developing code in one common file is also not very convenient. Therefore, the following approach is currently practiced: the code is developed in separate files, and then, using a collector, it is collected into one common file, which is then connected to the HTML file.

Individual files are ES modules. These modules are included in other files via the import command.

Usually, you create a main file to which other files are connected. This file is called entry point.

The bundler goes to the entry point, looks at what modules are connected to it. Other modules can also be connected to these modules. The bundler follows all the connections and collects all the code into one file. This file is called bundle.

Typically, the code that the programmer writes is located in the src folder, and the compiled code is placed in the dist folder.