What is Webpack?

Webpack is a great tool. It changes the way we think about web development these days.

Photo by Michał Kubalczyk on Unsplash

Webpack is a module bundler. Works with modules to make the whole work for you. In the end, it builds something called the dependency graph for your application starting from your entry point. Also, webpack does many things to compile what needed to make sure the modules work as expected in the browser.

If you are someone who doesn’t like reading, You can watch this video by Sean T. Larkin and Tobias Koppers. They explain how webpack works from A to Z.

First time I learn about webpack was when I decided to change one of the projects I worked with to webpack after four years working with GruntJS. Thanks for the open source community for their great works to create these things for us.

What Is JavaScript Modules

The module is something that contains a part of your application and enclosed to itself. Anyone could use it even if the implementation changed the result will still be the same. Module programming changes the whole game with the web application.

Modules make the application more significant, easier to deal with especially when the team is substantially large, and no one knows what others work on. Also, It makes the code more reusable, encapsulated, organized and convenient. Browsers did not support these things in the old days, and this is what webpack has offered us. You split your code the way you need and then you tell webpack where is the entry point for your application, and the output result location, and that’s it, you are done and your modular code is ready to work in the browser.

Modules types in JavaScript

• CommonJS. This is the first type I got to know through in my programming experience.

// Client.js
exports.client = client;
// Other module js file
const Client = require('./Client');

• Asynchronous Module Definition, which is one way to write a JavaScript module and split your code into modules without depending on the global object like the window.

define(['dep'], function (dep) 
    return function () {};
});

• AMD + CommonJS. You could also mix the use of the two modules above to create modules.

define(['require', 'dependency1', 'dependency2'], function (require) {
    var dependency1 = require('dependency1'),
        dependency2 = require('dependency2');
    return function () {};
});

• ECMAScript 6 this is the new fashion way to define and use a module in JavaScript.

// Client.js
const Client = {};
export default Client;
// Other module js file
import Client from './Client';

How to use webpack

Install webpack using the npm command npm install webpack --g, you can use it also as node module and import it anywhere and use the plugin system inside it.

Webpack deals with everything as modules; everything is a module, this is one of the problems I faced when converting the GruntJS build system to webpack.

• You can use the default webpack CLI. You need to add a webpack config file in version three and earlier. In the newer version which is four, you can get the default options without the need to create any configuration files.
• You can use the webpack-dev-server CLI that uses an express server inside it.

The core items for webpack

Entry

This is the central place that webpack needs to start from so it can build the graph.

Output

Telling webpack where to create the bundle after building your application graph. We also have “path” and “publicPath”. The path tells webpack where to add the generated files! A public path is used by several Webpack plugins to update the URLs inside the CSS and HTML files when creating production builds.

Loaders

These days we have too many types of files that need to be converted to modules for the sake of importing them smoothly, and loaders come in handy to fix the issues with importing CSS or TS files. Also, loaders tell webpack how to interpret none JavaScript entities and translate them. So, loaders help webpack to load things and convert it to another thing like “babel-loader”.

Plugins

It is an object that has an apply method on it. Webpack is made up to 80% of its plugin system. Plugins are additional node modules that usually work on the resulting bundle after the loaders finish works with files.

Check my tweet about this great webpack article written by rajaraodv

How webpack works internally

The webpack team explained to us how webpack work internally. The first thing Sean T. Larkin talked about is tapable. Tapable is something like the event emitter in NodeJS. You hook something and return something you can use.

Tapable is the backbone of the plugin system! — Sean T. Larkin

Firstly, we have the compiler

Initialization is the first place where webpack starts its whole magic. This phase is considered to initialize the first tapable instance that charge to trigger the main events for the webpack process, like run, failed, done. Then a compiler instance is created. Compiler instance is sent to every apply function in the plugins attached to the webpack configurations as its first params.

Secondly, we have the compilation phase

How webpack collects and gets the dependency graph for your application. Webpack starts searching for the entry point to manage modules.

In the compilation phase, the resolver gives us the needed path and provides us with some information for the files or modules. The resolver starts from the application entry point and makes sure that exists.

Then it returns the data for the entry file like the src, file name, unique id. Then the resolver sends all this information to the module factories to get the module and all needed things and return a module object.

These steps are repeated for the whole dependency in the resolved files to make sure that all the files graph is loaded, and all their information exists.

“Just because something works doesn’t mean it can’t be improved.” — Black Panther Movie

Conclusion

Webpack is a game changer for web development. Webpack does the whole work for you and makes your application more powerful. There are too many performance tools built with webpack that you should try in your project. If you still have not given it a try you have to.

Remember that webpack is a helping tool that helps developers make their life better and make better web development experience. So, don’t forget to support them however you can.

In the end, this is just a summary for my understanding of how webpack works, and how these things are combined together.