Web Pack — The Ultimate Module Bundler
Web pack is popularly known as module bundler for JavaScript Applications. Let’s go in depth.
Initially, Web packs converts large number of component files into single (or few) files which helps the server to serve the clients much reliably and in faster way, and thus can be said Web packs takes much responsibility to handle the application on production mode. Web packs normally, handle JavaScript files, but with the use of Loader, i.e. loader-css , loader-ts ,etc we can speak to web pack to transform and build a particular component when it will be necessary for the application.
Now, let’s look at important basic features of Web Packs -
- Entry Points
Entry Points in web packs are those files which can be build at first position.
By looking at above example, we can add multiple entry points as per requirements of our application. Here, we have a folder at root directory called “.src”, .src contains 3 folders pageOne, pageTwo and pageThree. These 3 folders contains index.js files respectively, which in our case can be said as Entry Points.
2. Output
Output feature tells the web pack where to emit the bundles.
Look at the example of above, Output can be specified using two fields, filename- specifies the name of file that has all the build code, and pathname- specifies directory name of the particular file.
3. Loader
Loaders in web packs are smart tools that helps the compiler to build all types of codes, example CSS, JavaScript or other Static assets.
Loaders initially, transforms the original source code into newer version, in which the web pack can be understand to proceed further in build process. When the particular components for example, style.css is needed to build, that component is first transformed into newer version of code and then pushed further in build process.
4. Plugins
Plugins are like in-built modules that help us to make our work more simpler. These plugins helps while handling build process in complex and huge applications.
5. Mode
We can set Mode parameter to either Production, development, none or testing based on our application requirements. The default value is set as Production here.