Webpack: A Recipe for Efficient and High Performing Web Applications

A single file might be enough when it comes to smaller level project but as project complexity grows code starts to become unorganized and global scope gets polluted. Therefore to solve this the codebase can be broken into multiple small files called modules. But the problem with this method is that the browser must make a seperate HTTP request for each file. What if the end user has a bad connection? What happens to the speed when third party libraries are used? To solve all these issues module bundlers come into play.

What are module bundlers?

Module bundlers are a development tool that combines multiple javaScript files(often referred to as modules) and their dependencies into a single file that is loaded into the browser. They can not only be used to bundle javaScript files but also CSS files, images, fonts and other assets that the production build might need.

how webpack bundles multiple files

Some of the most popular module bundlers are Webpack, Browserify, Parcel, Fusebox etc. In this blog, we’ll focus on Webpack, one of the most widely used bundlers, and dive into its working, advantages and how you can set them up and use them in your projects.

How does Webpack work?

To understand the working we lets imagine webpack to be a chef in a kitchen.

• Ingredients(modules): Ingredients in a kitchen are like modules in a codebase. Each ingredient represents a single module such as javaScript, CSS, images or other assets
• Recipe Starting Point(Entry point): The chef must start the cooking process from a ingredient. If this ingredient is missing the entire recipe is ruined. Similarly wepack must have a starting point from which it builds the dependency graph.By default it is set to ./src/index.js .
• Recipe Book(Bundling using Dependency Graph): The chef refers to the recipe book to obtain the desired dish. Here webpack builds a dependency graph based on the entry points to get the desired output file. First it generates a relationship map of the all the files. This process is called Dependency Resolution. It tracks down all the dependencies of the entry file and all the dependencies of the tracked down dependencies till it reaches the end file that doesn’t depend on any other package and builds the graph on this information. In simple words it is basically a visual representation of how of how all the modules are interconnected with each.

bundling can get very complex

• Dish(Output point): The final dish is the final result of the chef’s efforts. In webpack the output is the bundled and optimized file what can be loaded into the browser. By default it is set to ./dist/main.js .
• Kitchen Tools(Loaders): Loaders in webpack are like tools in a kitchen. Loaders can be used to bundle non javaScript files. For example style-loader and css-loader can be used to import CSS files into separate javaScript files.
• Chef’s expertise(Plugins): Plugins provide extra functionalities and features to the building process. For example html-webpack-plugin which is used to create a dynamic html file automatically based on a template. This is mainly used when your javaScript files name keeps changing in process like cache busting.

In simple, webpack is like a chef who takes in the ingredients(modules), starts with an recipe starting point(entry point), cooks by following a recipe book(dependency book) and adds a touch of their expertise(plugins) to simplify and enhance the process and finally produce a delicious dish(output point).

Now you should have a basic understanding of what webpack is and how it works. But if you are still not convinced of using it in your project lets take a look at several reasons on why it is beneficial and why it changed the way people write code.

Why use Webpack?

• Module Bundling: Webpack allows you to bundle multiple javaScript and non javaScript files into a single optimised file. It reduces the number of HTTP request which inturn improves the page load times
• Code Splitting: Webpack allows splitting the code into multiple bundles and loading only the necessary code needed for a particular page. It can be used to control resource load prioritization which can reduce load time and increase user experience
• Hot Module Replacement(HMR): Webpack allows HMR, which is used to for real time updates on the browser with change in codebase in development environment. Refreshing of browser to see changes is omitted.
• Lazy Loading: Webpack has a feature called lazy loading which allows to load certain parts of the application only when they are needed. This can reduce the initial load time by a significant amount. This process is closely related to code splitting where application is broken into separate bundles and loading only what is required.

lazy loading

• Tree Shaking: It is a feature that eliminates dead or unused code. This may include variables, functions are entire modules. This reduces the bundle sizes and improves performance. Webpack has built in tree shaking capabilities and can automatically detect and remove dead code.
• ES6 Modules: Webpack takes the full advantages provided by ES6 modules. One main use case is that it can transpile ES6 modules into older javaScript versions, using tools like Babel.
• Customization: Webpack is highly customizable through its configuration. It can be tailored to match the project’s specific needs.

Now lets take a look at how to setup Webpack for your projects

Setting up Webpack

You must have node.js and npm installed on your local machine. Now navigate to your project repository through CLI and run a command to create a package.json file with default values:

npm init -y

Now run this following command to add webpack as development dependencies to your project

npm install webpack webpack-cli --save-dev

Now create a webpack.config.js file and copy the following code into it:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Make sure the index.js file is present in src directory since it is the entry point. The dependency graph is created from this file. All the other needed modules must be linked to this file directly or through other files. Now add the following tag in the HTML file in dist folder:

<script src="main.js"></script>

Now to bundle the files after changes run:

npx webpack

npm scripts can also be added for this process. For information of how to implement other features of webpack into your project visit their official site.

Conclusion

In this rapidly evolving field of web development keeping the code base organized, optimized and efficient is very crucial. This is were module bundlers like Webpack comes in. With the ability to bundle javaScript and manage dependencies along with amazing features like code splitting, HMR, lazy loading, tree shaking etc, webpack has changed the way people write code for the web.

If you are looking to enhance your web development process you must consider incorporating Webpack into your projects. It is not just a tool; but a secret ingredient that turns ordinary code into extraordinary web experiences. Use Webpack, and let your web development skills reach new heights.

Peace.