Demystifying Webpack: A sneak peak !
Hello and welcome to my introductory blog post about Webpack .in this section I’ll answer 3 major questions-
- what is webpack?
- What problems does it solve?
- How does it work?
Let’s get this straight ! Webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph(will discuss about it further in the post) which maps every module your project needs and generates one or more bundles. So what webpack can be meant of is :-

Whoa ! What did it mean ?
Easy for you to write =>{
console.log(“using good , readable variable names, modularising your code, putting logic in separate files,
But this might not be understandable by the browser !
Browsers dont understand ES6, CoffeeScript, typescript etc
”);
}
Easy for browsers to understand=>{
console.log(“
Old school JavaScript(ES5), fever requests(good for bad internet connections, no white spaces or mangled variable names)
”);
}
Simply speaking , when you code and are about to offer your code to your end users, you are offering tonnes of html , javascript , css files and further dependencies to your users. So what this guy here does is really important :-
- It packages all your js files that you used — either your custom files or 3rd party , and creates a single .js bundle, similarly for html and css. And just not this. It takes full care that your code is working and is efficient on the client side. So for this it produces 3 pivotal tasks —
a)Uglification- all the fancy names you give to your functions , variables and objects are converted to more crisp and smaller ones.
b)Minification -This phase includes removing all the white spaces and indentations you applied in your code, making your code appear to be in a single line.
c) Transpiling- In a simple language, what you write in your editor is not understandable to your browser , who delivers and executes your code at the client end. It is the responsibility of the webpack to convert the code that is native to you, to the form that is native to the browser.

2. What Problems does it solve ?
- Namespacing =>
-variables declared outside of a function are considered global. Therefore during the process, its easy for your global namespace to get cluttered and it might also be difficult to maintain a good separation of concerns.
2. Files need to be changed before delivering to the client . This includes uglifying, minifying and transpiling(other languages=>javascript, ES6=>ES5)
3. Sending code to browser efficiently =>
- One request per browser would be insane. And it would be hard to manage order dependency.

3. How does it Work ?
Alrighty then ! now that we have got got a quick glimpse of what webpack is, you might now becurious about how webpack performs this magic. Let’s now see how it all happens under the hood ! Let me make this way too simple for you guys . Webpack works under 4 phases -
- Find Dependent files
- Apply Loaders
- Implement Module System
- Build the final asset
Find Dependent Files-
Webpack maintains an array of dependent files (with the main file or the entry file at the 0th index of this array), it goes to the entry file and look for dependency decorations like import , require etc.
If the path is valid and leads to a valid npm module or file then cool, add it to the array.
Apply Loaders-
If you were to ask me what is a loader I would say it simply means a function that takes in source code , makes some changes in it and returns the new source. That’s it !
this is how a loader functions :-

webpack needs to be told which loaders to apply in the config file. We can change or chain as many loaders as we want.
Apply Module System-
This is the crux of what we have been learning. Before explaining this phase let me tell you something about the module system standard that we use i.e,, commonJs .it simply uses the principle that you can export your code or module to be used as a dependency by some other file and that file can utilize your code by ‘importing’ it.Simple huh ? A point to note is that this is not a separate library , it is a standard. let’s see how webpack makes the system work by implementing this standard.


Consider these 2 files. Found any difference with the way you write your code and what webpack did to it ? You guessed it right ! webpack converts all your modules into separate functions and this function has 2 arguments- module and require.
Here the mainFile.js is the entry file of our application that is dependant on add.js. So what webpack does is it finds the dependency decorations in the entry file and places them in its array of which I talked about previously.
It replaces all the ‘require’ decorations with webpackRequire(indexof where the module is placed). So the mainFile.js gets placed at index 0 and add.js at index 1.
for example it changes require(‘foo’) to webpackRequire(indexof foo).
Did you notice something happening here ? Webpack is taking in your source code , changes it and gives you something else. Dont you think this fits in the definition of loader ? If you do , you are correct! so webpack applies its internal loaders and also the loaders explicitely specified in the webpack.config.js file.
Enough of theory ! Show me something practical
Now let’s see how webpack made the last step into practice . And this is where magic happens -
Webpack creates an IIFE(immediately executable function expression) which means that this function would be consumed immediately after it is defined. This function takes in an array that contains the module and all the dependencies that we put in earlier.
Inside the function , it defines another function called webpackRequire(index) which would help the modules to communicate with each other.
What this function does is , if some module says that, “hey I need the add module to finish up my work”, then this function says that,”alright, I know where this module is placed and let me get its export for you !”.
Inside this function, it makes module={exports: {}};
From the moduleArray’s index the required file is sent and its contents are executed using the file(), since it already converted the contents of our code in separate functions and returns module.exports so that we get the finished code of the app.
finally webpackRequire(0) is called so that webpack can find the entry file and initiate the process.
You might also think that if 2 modules require the same file then that would be very tedious ! But webpack takes care for this too as it caches the file previously found and if any other module requires it again, it simply fetches ift from the cache array like this -

Be the compiler !
now consider the 2 files we created earlier and the webpack file, which executes first. It first calls the webpackRequire(0) which fetches the starting module from index 0 of the moduleArray and finds the file mainFile.js. Inside this file webpackRequire(1) causes the function to fetch the module from index 1. So we are at add.js file i.e the add function.
add.js function fills the module.exports with a function so we get the aaddition function inside it and returns the function to mainFile.js and in turn gets executed so we finally print the result .Cool isn’t it ?
Did it solve our problems ?
- Namespacing- all files wrapped inside the function so no problem of global variables.
- Separation of concerns- if you dont want any file to get used, just don’t export it. This leads to another cool and important feature called module privacy.
A NOTE OF THANX
So this was the introduction and some sneak peak about what webpack is and how it functions. I hope I was able to deliver my thoughts appropriately and deliver all complexities with ease. If you have any queries reagarding the same, do throw them down in the comments.
