What is WebPack ?

Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. However, the line between bundler and task runner has become blurred thanks to community developed webpack plugins. Sometimes these plugins are used to perform tasks that are usually done outside of webpack, such as cleaning the build directory or deploying the build.

 

HOW IT WAS

Once upon a time, we had very few scripts on a webpage. You would include them with a few simple lines, such as this;

<head>
   <script src="scripts.js" type="text/javascript"></script>
</head>

This was a simpler time, when pages had few or sparse scripts. You could fit everything in a few files, and you could easily load them without conflict.


HOW IT IS NOW

In the last 10 years, the entire scope and spectrum of web development has completely changed. Now we have dozens of scripts, each with a different purpose, each oftentimes created by a different person, each with different requirements.

It’s not uncommon for a modest, or even a small website to need several script libraries. What is more, these libraries oftentimes depend on other libraries — called “dependencies”Not only do you have to load these scripts, you have to understand what they need to have loaded first!


React, and Hot Module Replacement (HMR) helped to popularize webpack and led to its usage in other environments, such as Ruby on Rails. Despite its name, webpack is not limited to the web alone. It can bundle with other targets as well, as discussed in the Build Targets chapter.

If you want to understand build tools and their history in better detail, check out the Comparison of Build Tools appendix.

Webpack Relies on Modules

The smallest project you can bundle with webpack consists of input and output. The bundling process begins from user-defined entries. Entries themselves are modules and can point to other modules through imports.

When you bundle a project using webpack, it traverses through imports, constructing a dependency graph of the project and then generating the output based on the configuration. Additionally, it’s possible to define split points creating separate bundles within the project code itself.

Webpack supports ES2015, CommonJS, and AMD module formats out of the box. The loader mechanism works for CSS as well, with @import and url()support through css-loader. You can also find plugins for specific tasks, such as minification, internationalization, HMR, and so on.

A dependency graph is a directed graph that describes how nodes relate to each other. In this case, the graph definition is defined through references (requireimport) between files. Webpack statically traverses these without executing the source to generate the graph it needs to create bundles.

Webpack’s Execution Process

Webpack’s execution process

Webpack begins its work from entries. Often these are JavaScript modules where webpack begins its traversal process. During this process, webpack evaluates entry matches against loader configurations that tell webpack how to transform each match.