What is webpack
A bundler alone will just concatenates all the files, webpack not only concatenates the files, but also optimises your files and allows you to hook in various plugins to transform your files.
But in its core, the idea behind webpack is to have mutliple
css and whatever files you have and bundles them together.
It then tries to analyse the connection between these files, like the import and export and bundles them together and allows you to optimise it.
How Webpack works
Lets take a look how webpack actually works behind the scenes.
Behind the scenes, webpack has 4 important features
An entry point
It always needs at least one entry point (you can have multiple though).
If we consider a
react-app , this could be our
app.js file, which basically is our root file that mounts our react app to the DOM.
The reason why it needs this file is, because it then analyses the dependencies of this file so that it can understand the different files that make up our application and then bundles them together into an
output we specify, like bundle.js in dist folder
dist/bundle.js (the name of file and the location where this needs to be placed is specified by us).
This is the core functionality, but there is more to it.
In between providing the entry point and outputting the file, there are two more important feature which we can utilise.
Loaders are basically per file level, so for example, we can say that all the
Loader X , all
css files should get handled by
css-loader are the popular examples which gets used in most of the projects. So, Loaders are file dependent or apply file dependent transformations.
Where loaders are applied on a per file basis, plugins instead take the concatenated files, so the bundle but before it's written to the output.
Here we can apply some general transformations or optimization, for example uglify plugin
So this is how webpack works and what it does behind the scenes, and this is all set up in a webpack configuration file which I will be walking you through in my next articles.
Stay Tuned !