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.
@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.
I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript...
Always eager to learn new technologies. I am here to share, ask & eventually learn.
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 ?
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.
I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript...
Always eager to learn new technologies. I am here to share, ask & eventually learn.
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.
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.
So lets say I have 2
.JSfiles,file1.jsandfile2.js, I want them to load in respective order. Now i usewebpackto bundle both of these files to one file named asfinal-bundle.js. In client side usingfinal-bundle.jsbrowser 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.jsandcategory-bundle.js. That should be the best practice ?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.jsfile 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.
Nice writeup, Thank you all for the answers. Appreciate. :)