The Webpack series — Part 1
In these series of articles, we will cover some basics of the webpack world and its ecosystem.
What is webpack?
Webpack is a module bundler. It bundles your scripts, assets, images, and styles.
Need for webpack
Server Side Templating
Server-side templating depends on the backend server. Here we create a fully assembled HTML doc and send it to the client. In the server-side templating world, we send a new page every time the request is being made for any page.
Single Page Application
SPA is when we send a bare bone of HTML then a huge javascript code is loaded. The javascript code runs on the client browser which assembles the page. Usually, every new page is assembled by already loaded javascript we minimally request server for a new page. This is great as now a server may just exchange the data(JSON) required by the page.
Comparision
Server-side templating was very popular during the initial age of the web world because servers were powerful machines compared to client machines that’s why running huge code on the client was not an option. However, nowadays the client machine is powerful and can run a huge javascript code. This reduces network requests and provides a better user experience.
For the last decade, huge developments were made and client-side resources have improved the network is better & CPUs are better. Seeing this trend world stated to shift to SPAs.
Modern Web Development
Modern Web development needs large javascript code. To maintain this large javascript code we split it into smaller code based on the functionality the code servers. With such a split following problems arises:
- Interdependency of files.
- Loading according to use hierarchy.
- Also, a large number of files take more time to loads over the network.
The problem occurs when interdependence occurs i.e one file depends on another file that may depend on some other files. This may create a complex network of file dependency and needs to be loaded correctly in order of dependency and use.
This is where the webpack comes to rescue it not only takes care of the correct module dependency but also bundles the code into one file.
Conclusion
Webpack is a module bundler. It bundles small interdependent code files into one bundle, taking care of their dependency and loading order. The webpack ecosystem made it possible for technologies like React.js ❤️ to shine.
Here is #advice 😉 for project file structuring.
Flat folder, long descriptive names are ideal for the maintenance of files structure in the project.
