Webpack, step-by-step: basic bundling

This is the first in a series of posts about how to get started using webpack for building web applications.

The most basic of uses cases I can think of for using webpack is for simply bundling your JavaScript assets into a single, deliverable file. There are a lot of different tools available that will do bundling for you, but webpack is a really good option for doing even this simple task in your web development build/packaging workflow.

I feel like this often gets overlooked in favor of discussions that end up complaining about how "complicated" and "difficult to use" webpack is. In this post, I hope to demonstrate that for a task like this, getting started with webpack can be really, really simple.

Before we get started though, if you're at this point and still wondering why you would even want or need to do this, you should browse through these search results ("why you should bundle your javascript).

Now that you know the why, here's the how.

The best part here is, this is really simple to do. Let's assume that you have two very simple JavaScript modules in your app, one that imports the other one, and you want to ship them and run them in your web application as a single, bundled, .js file...

/* /src/js/util/index.js */

module.exports = {  
  log: function( message ) {
    console.log( message );
  }
}
/* /src/js/main.js */

var util = require( "./util" );

util.log( "Is this thing on?" );  

Yes, I do realize this is an overly simplistic example...we'll get a little bit more in-depth as we get deeper into the series, but for now, the point here is that we have one, cohesive JS module in util/index.js that can be developed and tested in isolation, and imported and used wherever it is needed elsewhere in the application, like it is in main.js. This is the power of modular JavaScript, and demonstrates the importance and need for a tool that can bundle these modules together into a single, deliverable output that can be consumed and used in standalone form.

Now lets look at how we can bundle these together with webpack.

First of all, you'll need to have webpack installed. You can do this with npm, either globally, or local to your project with either of the following commands:

npm install --save-dev webpack  

or, globally with

npm install -g webpack  

Once you have webpack installed, you'll need a configuration file. This is what ours will look like for simple bundling:

/* webpack.config.js */

module.exports = {  
  entry: [ "./src/js/main" ],
  output: {
    filename: "./dist/js/main.js"
  },
  resolve: [ "", ".js" ]
};

Yes...honestly...it really is that simple. We can bundle the output of our application by executing the following command from a terminal prompt:

webpack --config webpack.config.js --progress  

If you didn't install webpack globally, but rather only locally for your project, you would need to adjust that command like this:

./node_modules/.bin/webpack --config webpack.config.js --progress

Running either of these commands will generate the file specified in the output.filename property of the configuration.

That's really all there is to it. If all you want or need is a simple bundler for your JavaScript, webpack can do that for you, and can do so with relative ease and simplicity.

The real beauty of webpack is the fact that this is just barely scratching the surface of what it can do for you as a tool, and we'll look at some of the other things it can do for us in future posts in this series, and build on this example.

My hope is that this post has/will remove some of the misinformation I've seen/heard/read out there about how complicated webpack is. Like many other tools at our disposal, it is very powerful and flexible, and can likely do as much or as little as you might need it to do for you. As with anything, the more you need from it, the more complicated it can be to figure out how to use...it's just all about perspective. I hope that if we can approach dissecting how to take advantage of its power in a progressive manner, that it will be easier to understand how its various features work and can be taken advantage of.


The source code to accompany this post can be found here