Webpack tutorial – Questpond
how to create a Bundle?
WebPack is a Module Bundler.,Normally,,developers break their applications into Modules.
For example : – if we have an ERP System,then we will have an AccountingModule, BillingModule, PaymentModule, InventoryModule and so on.,Developers,divide their projects into Modules that they can handle better, manage better,increase reusability and so on.The same is true for JavaScript as well.
To reference,modules in JavaScript with each other we have,the module formats.,There are,two types of Module formats or two categories of Module formats.,The one which was introduced,before ES6 and below.,The other kind of categories which were introduced,during ES6 and above.
it needs to collaborate with other modules,to create some useful functionality.When we talk about an ERP System,the BillingModule will first create the bill,it will then call the PaymentModule,and the PaymentModule will do the Payments,and finally it will do the Accounting.Modules do not work in Isolation, they call each other, integrate with each other,and reference each other.
In JavaScript Modules means one physical file.The AccountingModule.js is one module,in that we have Journal class and Ledger class.In the same way we have Billing Module, in that we have BillPrinting class.We have divided the project into Modules.
Now we can,start using them.,Modules cannot work in Isolation, it needs to collaborate with other modules,to create some useful functionality.When we talk about an ERP System,the BillingModule will first create the bill,it will then call the PaymentModule,and the PaymentModule will do the Payments,and finally it will do the Accounting.Modules do not work in Isolation, they call each other, integrate with each other,and reference each other.
To use this module,we need load them,logically,in a proper sequence.
The,BillingModule is dependent on PaymentModule and PaymentModule is dependent on AccountingModule. Logically, the first thing we should load is,the AccountingModule,then,the PaymentModule,then,the,BillingModule.
Let us assume,we have a complex system,a big healthcare system,The healthcare system have a very very complex object model.In the healthcare system can have a Hospital,the Hospital can have Patients,Patients are having Allergies,Allergies have Treatments,Patients are allocated to Doctors, have to Billing, Billing have taxes, Billing goes to Account.
Such kind of a model if we create,using the imports, exports and class keywords,and loading this kind of sequence is really pain,as then we need to figure our the dependencies.
If we do not give the dependencies properly we will get errors.
The first problem,there is complication in going live.
The second problem is,Performance,At this moment we are loading the AcccountingModule then PaymentModule and Billing Module,There are three calls made for every JS files.
we do not want to get into,the issues of,the dependency management.,The second thing is,we just want to create one bundle. We do not want,three request to go,just want 1 request to go.,Do we have a framework wherein,it does the bundling.,Second,it takes care of the dependencies.,That’s what exactly WebPack does.
WebPack is a module bundler. It will take all of these modules and create a one single module with all the dependencies.
Let us talk about how to connect modules and reference modules in JavaScript by using the official way first.
This BillingModule has,two classes, one is,BillPayment and BillPrinting.When this BillPayment is paid,after that we want to call,the PaymentModule.When the BillPayment,is saying,CreateBill,and once the bill is created,after that call the PaymentModule.
In order to use the PaymentModule,in the Bill module,first the PaymentModule,should export himself.
The classes which need to be consumed,in the Bill module, we have to write here,export.
If we do not write export then we cannot do import.,From the BillingModule to use the PaymentModule write here import,from,PaymentModule.From the PaymentModule,will import,the,PaymentGateway.
To connect two modules in JavaScript use import and export.,The module which,is going to get consumed write export,and the consumer who is going to use that module will say import.
WebPack is a module bundler. It will take all of these modules and create a one single module with all the dependencies.
By using node we can say npm install webpack or install it globally -g
WebPack needs two things in the command line.
The first it needs is,the Entry point,of the Module.,We have the BillingModule which is the start point.,The BillingModule calls the PaymentModule and PaymentModules calls the AccountingModule.,BillingModule is the first JS file which references all the other modules.,The Entry point is,BillingModule.js.
The next thing we need to specify is,where do we want the Output?.– output.We would,put the output in the Dist folder.,Create a folder called as Distribution,folder,where we can put all the compiled,JS files.,Here we need to create a bundle called as Bundle.js
We need the Entry point,from the first module from where,the other modules are getting connected.,Second we need where the final output will go in.
WebPack only takes those modules,which are referenced.
There is a dist folder created and inside this folder,we have,the final Bundle.js.Rather than referring,three JS files,we can just reference,one single bundle.
When we run this on the web,say here,SimpleExampleWebPack/,Dist folder is lying inside the SimpleExampleWebPack so give the proper folder name – dist/Bundle.js,We are referring this bundle,in the UI. We do not have to refer now individual files.
BillingModule is the entry point,and this where we want the output,and the name of the library we refer in the UI,export it with the name ERP.,Press Enter,This will again create the Bundles.
