What is Webpack and why do we use it?

Let's go back in time

don't you just love some history?

Back in the early ’90s, web pages were built using only HTML and CSS, hence giving it a static feel with absolute zero interactivity. In the early 2000s, the need for functionality in web pages arose and developers began to include JavaScript in their websites. By the mid-2000s, highly functional and interactive web pages became the new cool and developers had to match this by adding more JavaScript files (all handling different sections in a project and some of them requiring external dependencies before they execute their purpose) in their project.

Having more JavaScript files in a project resulted in a lot of challenges for developers, some of which are listed below;

• All JS files needed to be loaded in an orderly fashion in the HTML file, and files which depended on other files needed to be strictly tracked. Because JavaScript files loads in a synchronous manner managing load order can be a daunting task when done manually.
• Having many script tags in an HTML file means the server is getting called repeatedly, which ramps up cost and lags performance. This ultimately adds up to bad user experience.
• Difficulty in maintenance.
• Waste of development time.

Over the years, The JavaScript developer community continually came up with a couple of solutions to tackle these problems some of which are;

• Introduction of the ‘defer’ attribute by Microsoft into IE 4
• Introduction of the ‘async’ attribute by HTML 5
• Uglifying, That is concatenating multiple simple modules into a file and minifying them.
• Modular programming and module loaders.
• Module bundlers.

For the purpose of avoiding digression, I will not be expatiating on all the aforementioned solutions but will be focusing on Module bundlers.

Back to the Present

One of the solutions proffered by developers in recent times to solve the problems encountered when using several JavaScript files(or modules) in a project is Module Bundling.

What is Module Bundling?

Module Bundling is the process of combining a group of modules (including their dependencies) in the correct order into one single file or a group of files.

What does a Module Bundler do?

A module bundler is a tool that takes several JavaScript files (including their dependencies) and bundles them into a single file for the browser to use. There are several module bundlers out there, but we will be focusing on Webpack because of the many benefits it offers.

Webpack as an efficient Module Bundler

credit: ag-Grid

Webpack is an open-source JavaScript module bundler that runs on top of Node.Js. Though it’s module bundling capabilities are primarily specific to JavaScript, with the right and matching loaders/plugins, it can transpile (i.e read source code written in one programming language and produce the equivalent code in another language that the browser understands) modules and bundle them before they hit the browser.

How it works

Through its configuration file, Webpack allows you to specify an entry point to your application. By default, the index.js file is the root entry point.

• An entry point is the root module of an application.

Once Webpack identifies the entry point, it begins to build out its internal dependency graph. This dependency graph comprises of every file, module or none code assets such as images, videos or web fonts (these are called dependencies) your application needs. After it has built a dependency graph, it packs all of them into a small number of bundles, usually one by default, which the browser loads efficiently.

Also provided in the configuration file is the output property, which is used to specify the path where the created bundle/bundles should be generated and how they should be named.

The created bundle.js file/files are optimized, minified and can be loaded in less time by the browser.

Enhanced Capabilities

don’t you know webpack has superpowers?

Loaders

To carry out most of its additional features, Webpack requires loaders to transpile files. Below are examples of some loaders and the tasks they perform.

• Babel-loader: Transpiles ES6 JavaScript to ES5 JavaScript which is understood by all browsers.
• ts-Loader: Transpiles TypeScript to JavaScript
• coffee-loader: Transpiles CoffeeScript to JavaScript
• css-loader: Transforms CSS preprocessors like SASS & LESS to CSS.
• style-loader: Places the output strings generated by css-loaders inside <style> tags in the index.html file.
• url-loader: Transforms large images included as separate files into base64 URLs
• html-loader: exports HTML as a string.

Plugins

Plugins offer additional capabilities where loaders fall short. Below are examples of some plugins and the tasks they perform.

• HtmlWebpackPlugin: Automatically creates and index.html file and includes script tags for each resulting bundle.
• MiniCssExtractPlugin: Extracts CSS files into separate files. it creates CSS files that match each JavaScript file.
• WebpackBundleAnalyzer: Provides readable statistics (from space consumed by bundle.js file to the total amount of modules bundled)about the bundle.js file.

Hot Module Replacement

This is another awesome feature that Webpack provides. HMR automatically exchanges old modules with new ones when the application is running without fully reloading the entire application. An instance of when this comes in handy is during development when you’re making some style changes in one module of your application and you need the styles applied immediately without a full reload of your application. The diagram below provides a good representation of how HMR works.

credit: rajaraodv

For a detailed understanding of how hot module replacement works in Webpack click here.

Code Splitting

This is a core feature of Webpack. With this feature you can split your code into small chunks which the browser loads when it needs them, hence reducing initial file size and improving the overall load time of your application.

credit: Addy Osmani

Wrap up

Let's wrap this b*t*h up.

Webpack is a very efficient build tool and when used correctly offers a lot of benefit in present-day web development. I recommend it as a build tool for any web developer who is working on a large project that needs a module bundler not only because of its efficiency but also due to the large community that supports it as you can easily find out solutions to any issues you face when using it.

However, there is absolutely no need to use Webpack if you’re working on a mini project with just a handful of JS files as you can easily add them directly to your index.html file with minimal hassle.

Note that I have only mentioned some key features of webpack, there are still more interesting features webpack can offer you to save you from some development migraine. I encourage you to find out more and feel free to share them with me in the comment’s section.