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.