This is the bigger picture of what webpack is and does, let's understand how it works behind the scenes
since it is such a crucial tool handling our whole build workflow. Behind the scenes, webpack has four
important things, four important features,
it always needs at least one entry point,
you can have multiple ones.
This could be our app.js file, our root javascript file which mounts our react application to
the dom, which calls react dom render for example, it needs this file since it then analyzes the dependencies
of this file and the root entry file will have a dependency to another file which then in turn has
more dependencies, so webpack can build up a dependency graph starting with that root entry file
so it can understand which files make up our application
if we give it our entry file. It then analyzes all the dependencies and bundles them together into an
output
we specify it like a bundle.js file in a dist folder, we specify the file name and where it should go.
And there it will put all these dependencies into that file, correctly ordered and in one concatenated
output file.
This is the core functionality but as I said it's more than that,
in-between, there are two other important features we can utilize.
For one there are so-called loaders, loaders are applied on a per file level so we can for example say
all javascript files should get handled by loaderX, all css files should get handled by loaderY,
babel-loader and css-loader are two popular examples which get used in a lot of projects, so
loaders are file dependent or apply file dependent transformations.
We also then have plugins where loaders are applied on a per file basis, plug
instead take the concatenated files, so the bundle but before it's written to the output.
Here we can apply some general transformations or optimizations like uglify,
so this is on a global level and happens after the loaders did their job.
This is how webpack works, what it does behind the scenes
and this is all set up in a webpack configuration file which we will set up together in this
module.
So without further ado let's dive into building our own project setup.