Discussion on: Learning Webpack Concepts and Creating your Custom Webpack Plugin.

[Shaiju T]

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]

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.

[Shaiju T]

Nice writeup, Thank you all for the answers. Appreciate. :)