Webpack is a JavaScript module packaging tool, as advertised on the website. It has an apt name. But what I want to accomplish in this article is to detail what makes Webpack really powerful.

This article won’t show you how to use Webpack, but rather what makes it more special than a normal packaging tool.

##Webpack is still a packaging tool

One of the biggest reasons for tools like Webpack is to solve dependency problems. This dependency problem is caused by JavaScript (especially modules in Node.js).

Node.js allows you to use modular code. The modularity of the code leads to dependency issues. Cyclic dependencies may arise, such as A->B->A reference. Tools like Webpack allow you to build complete dependency diagrams for module references. With this diagram, the parser can help relieve the stress of relying on the diagram.

Webpack places multiple entries in the code and has an output that has completed the binding of the dependency graph to one or more files.

Webpack can do more

What makes Webpack so special to me is the excellent extensions it provides.

Loaders

Loader is the mini-transpiler I like to mention. It works with any type of file (TypeScript, CoffeeScript, JSON, etc.), and the resulting JavaScript code is then added to the dependency diagram that Webpack is building.

The beauty of Loaders is that they are endless. Loader is an extension that allows you to create your own loaders. There are currently 100 default and a large number of third party loaders.

For example, if you want to compile a statically typed language like C# into JavaScript that Webpack can understand, is there a Loader?

Loader has unlimited possibilities, and can be assembled, configured, and filtered based on file types.

A common example

As explained in the Webpack documentation, a Loader is just a Node.js module that can output funtion. A Loader is as simple as the node.js module that prints function:

module.exports = function(src) { return src + '\n' + 'window.onload = function() { \n' + ' console.log("This is from the  loader!" ); \n' + '}'; };Copy the code

This is a small example of what a Loader is. This Loader is adding a function that outputs on the console when the Window loads in the current browser session.

With this in mind, it’s easy to understand that no matter what kind of language the source is, it can be interpreted as we want it to be. To reanswer our previous example, we can take C# as input, create a parser, and convert it to natural JavaScript that Webpack accepts.

A compiler to convert C# to JavaScript is a bit far-fetched and frankly pointless, but I hope you can lead us on how we can use Loader to make Webpack more than just a bundler.

Plugins

Plug-ins allow Webpack to customize a wider range of services than Loader. In plug-ins, you can add additional functionality to Webpack. For example, you can add a plug-in to zoom out, extract some text from the output (such as CSS), use the plug-in for compression, and so on.

The plug-in does its job by accessing the Webpack compiler itself. They have access to all possible compilation steps and can modify all of them. This means that a plug-in can modify what the file has already generated, can modify what the file has introduced, and so on.

Here is a small example of a plug-in:

 file: './my-custom-plugin.js'

function MyCustomPlugin() {}

MyCustomPlugin.prototype.apply = function(compiler) {
    compiler.plugin('emit', displayCurrentDate);
    compiler.plugin('after-emit', displayCurrentDate)
}

function displayCurrentDate(compilation, callback) {
    console.log(Date());

    callback();
}

module.exports = MyCustomPlugin;
Copy the code

In this example, we added event handlers to each of the two Event hooks in the Webpack compiler. The result is a date printed on the console before the asset is printed to the results directory, and a date printed after the asset has been printed.

The plugin can also be applied to Webpack configuration:

 var MyCustomPlugin = require('my-custom-plugin');

var webpackConfig = {
    ...
    plugins: [
        new MyCustomPlugin()
    ]
}
Copy the code

The plug-in can now be run in both the EMIT and after-emit phases of the compilation process. A good list of Compiler Event Hooks is available on the Webpack website.

Again, the importance of plug-ins is that they are extensions. Webpack allows the user to fully extend its kernel. There are many plugins to choose from, many from third parties.

Keep in mind that plug-ins can take the assets you request and compress them through some algorithm. In fact, there are already plugins that can do this.

conclusion

Webpack is a module packaging tool. It produces dependency graphs that output in a browser-readable format.

However, Webpack can do more.

What if we could compile C# code into JavaScript? What if we got an image and wanted to crop it automatically and use greyscale?

I think if you look at Webpack as a compiler, not just a packaging tool, you’ll see how powerful it really is.