Front-End Insights

WebPack as an alternative to Gulp?


In the previous post I wrote in detail how to use Gulp. But there is another tool which is worth considering. This tool is called WebPack and today I will show you what it is and what can be achieved with it.

What is WebPack?

WebPack is a module bundler which means that it can bundle various types of resources into a single one. For example, if we have many JavaScript modules in our project as well as many SASS files, it can transform and minimise them and then place them into a single *.js file which can be applied to the website. This sounds similar to Gulp capabilities, right?

You may say “But we have a lot of module bundlers around. Why the hell do we need another one?”. Well, the main advantage of this particular bundler is its Code Splitting feature which allows us to load bundled code chunks on demand. This capability may be really important in huge projects so it’s worth considering using it if we work on such a project.

Let’s get started with WebPack – installation

Ok, so we know what it is. Now it’s time to see how to get things done with WebPack. First, we have to install it the same way as any other npm module (of course with sudo if necessary):

npm install webpack -g

Now we have WebPack installed globally. Next, we need to add it to the project. To do that, go to the root folder of your project and add the package.json config file by running the below command:

npm init

Ok, we are now ready to install WebPack into the project:

npm install webpack --save-dev


After the installation of WebPack we have its command available in the command line. It has some handy options – please see below the most useful:

  • webpack – builds the bundle once
  • webpack -p – builds once with minification
  • webpack --watch – builds and waits for further changes

Now that we know how to run the bundling process, let’s see how to configure it. To do that we have to create a webpack.config.js file in the root folder:

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js';

The above configuration will be read by the webpack command everytime it runs. In the config file, we have to specify at least the entry point (it may be more than one if we want to create code chunks) of the bundle and its output.

The main.js file should be an AMD or CommonJS module entry point. When we invoke the webpack command it will look into this file and resolve all its module dependencies. The next step is to bundle them into the bundle.js file and put it into the dist folder.

WebPack also has the ability to embed static resources as stylesheets or images into the bundle. If you want to know more about it, please see the docs.

Module loaders

Ok, we know the basics so now it’s time to go deeper and introduce the module loaders concept! Generally speaking, the module loaders in WebPack are similar to the plugins in Gulp. They allow us to apply transformations of our resources during the bundling process and they are applied in a pipeline so we can chain them.

Let’s see an example of how to work with it. First, we need to install a module loader:

npm install babel-loader --save-dev

If we have the loader installed, we can now configure WebPack to use it so let’s amend our webpack.config.js file:

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js';
    module: {
        loaders: [
            { test: /.js$/, loader: 'babel-loader' }

This time, when we use the webpack command, it will run the loader which will transform our files using Babel. Owing to the fact that WebPack can handle static files too, you are also able to use transformations such as LESS or Sass. The full list of available loaders is located here.

To summarise – is WebPack an alternative to Gulp?

The answer to this question depends on your needs. As you can see, WebPack can cover many of Gulp’s capabilities. If you use Gulp only to transform your LESS/Sass styles into CSS and to minificate your JavaScripts, it may be better to use WebPack instead. It allows you to do all of that and, additionally, can bundle everything into a single resource which can be loaded on demand. On the other hand, if you want to use the power of Gulp in the other areas, you can still combine it with WebPack – please see this doc if you would like to know how to accomplish that. No matter what your goal is, WebPack is a powerful tool and I encourage you to get acquainted with it.

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.