DEV Community

Learning Webpack Concepts and Creating your Custom Webpack Plugin.

Jasmin Virdi on November 09, 2020

In this post I will be covering the core concepts of Webpack which will help us to understand the basic mechanism and give us more clarity before b...

Read full post

Shaiju T • Nov 10 '20 • Edited

Nice, 😄, I am new to this, simple question. : Using webpack browser will know which file to load first. So does that mean webpack runs in browser or webpack generates the .JS file which does this job ? I think webpack doesn't run in browser.

Neo • Nov 10 '20

You are right. Webpack doesnt run in the browser. browser understands only one language and its javascript. webpack helps us in generating the js bundles. on a high level, lets say that webpack bundles all our scripts into a single bundle.js. And this bundle.js is loaded into the browser when our application loads.

Jasmin Virdi • Nov 10 '20

Thanks @neo1380 , for summing it up. :)

@shaijut webpack helps to create module system which allows you to manage multiple files and dependencies on the client side. Browser don't have built in module resolver that is why we use Webpack. If you consider Node which is used on server side comes with built-in module resolver.

Shaiju T • Nov 10 '20

So lets say I have 2 .JS files, file1.js and file2.js, I want them to load in respective order. Now i use webpack to bundle both of these files to one file named as final-bundle.js. In client side using final-bundle.js browser will decide which file to load first ? Right ?

I have another question: Suppose I have 2 pages, Home page and Category page, So do we need to bundle each pages dependencies in separate bundle ? Like home-bundle.js and category-bundle.js. That should be the best practice ?

Jasmin Virdi • Nov 10 '20

Yes. So there is a dependency graph which helps to figure out which files need to be loaded first and what all modules are dependent on it. The entry file which you specify in the configurations is the entry point of dependency graph.

Most of the frameworks like Vue, React has App.js file which includes the root instance to render the app component. This file is generally used as entry point unless you want to configure it. You can pass multiple entry points to generate smaller bundles as well.

You can refer this for more details on configuring multiple entry points.