How the Webpack bundler works in JavaScript

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

This is not very good, since a lot of included files slow down the loading speed of the site. Therefore, to speed up the loading, you need to put all the code into one file.

However, developing code in one common file is also not very convenient. Therefore, the following approach is currently being practiced: the code is developed in separate files, and then, using the bundler, it is assembled into one common file, which is included in the HTML file.

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

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

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

As a rule, the code that a programmer writes is located in the src folder, and the bundled up code is placed in the dist folder.

The bundler also allows you to adjust the build mode. The 'development' mode is for the development process. It builds the code in a development-friendly way. The 'production' mode is intended for the final code that will be put into production. In this mode, the code will be minified to reduce its size and increase loading speed.

Tell me what is a bundle.

Explain what is an entry point.

Tell me what are the build modes.

enru