Webpack

What is webpack

Webpack is a bundler (A bundler is basically a tool that puts all your codes and dependencies together in one JavaScript file. ), but actually is more than that.
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.
For example, it transpiles the next generation javascript to current generation javascript

But in its core, the idea behind webpack is to have mutliple javascript, html, 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

Loaders are basically per file level, so for example, we can say that all the javascript files should get handled by Loader X , all css files should get handled by Loader Y
babel-loader & css-loader are the popular examples which gets used in most of the projects. So, Loaders are file dependent or apply file dependent transformations.

• Plugins

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 !