Let’s understand WEBPACK !!!

Entry point & Output

Hello Everyone, Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.

Introduction — What is Webpack?

Entry points & Output

The Webpack is Build and Managing Tool that manages your Javascript code and Styles. Let’s take a small HTML application with 3 files such as

index.html — A basic page with the text Wepack - Build Toolin it and 2 files linked.

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <div id="text">Webpack - Build Tool</div> <div id="copy-text"></div> <script src="./variable.js"></script>  <script src="./copy-variable.js"></script>  </body></html>

variable.js — Script that captures HTML text and assigns it to a variable.

const htmlText = document.getElementById("text").innerHTML

copy-variable.js — Script that copies text and put it in its respective ID in an HTML file.

const copyText = document.getElementById("text") copyText.innerHTML = `<div>${htmlText}<div>`

Now, What happens if we change the order for the script files?

<body> <div id="text">Webpack - Build Tool</div> <div id="copy-text"></div> <script src="./copy-variable.js"></script>  <script src="./variable.js"></script>  </body>

Any guesses ??? Yes, I know It’s quite easy for you all, We would be getting Uncaught ReferenceError: htmlText is not defined

As it is a small Application, it is easy for us to resolve the errors but, for larger applications, it gets tougher to debug such errors. Don’t worry!!! This is where Webpack is prominently used in Frontend Applications.

How does Webpack work?

Webpack internally creates a dependency graph and maps it to one single HTML file that gets loaded in the browser.

Hold on!!!! How does a Webpack know the dependencies of the files? let’s rewrite our previous JS files with Webpack configuration.

variable.js

export const htmlText = document.getElementById("text").innerHTML

copy-variable.js

import {htmlText} from 'variable.js'const copyText = document.getElementById("text") copyText.innerHTML = `<div>${htmlText}<div>`

if you have noticed import and export keywords which actually help Webpack to plot the dependency. export -- exposes code to external files. import -- inherits code into the file.

Now that we get how Webpack bundles our code. For more information, please refer to this GitHub link for the configuration part of a very basic vanilla JS code.

Core Concepts of Webpack

Entry

For any application, we have a starting point where our application starts. Entry is a place where we inform Webpack that this is our Application’s starting point. In most cases, it would be index.js or app.js

module.exports = { entry: './index.js', };

It is not that we only have one Entry point but in some cases where we use the same application for 2 sets of users then we might end up having 2 entry points.

module.exports = { entry: { normalUser: './index.js', owner: './owner.js' }; }

Output

After bundling i.e. clubbing all the files into one single file. we need a place to store this file so that we can point this to our HTML page as the source file for the Script tag.

output: { path: __dirname + "/dist", filename: "bundle.js", },

path — Location, where we store this bundle file. filename — Name of the bundle file.

Wrapping up!!! Let’s explore more core concepts of Webpack together in my next blogs here.

Reference

Here we go, That’s it folks for this blog. I hope everyone liked this blog. If you like it, give it a clap 👏 , and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏. Until Next time, Happy Learning ✍️

Abhishek Kovuri, UI developer

Let’s Understand Webpack !!!