Beginner’s guide to Webpack

Nader Dabit
JavaScript Training
9 min readSep 7, 2015


Or what I wish I knew when starting with Wepback.

Click here to go to the final Github repo.
We are using Webpack 1.x. Webpack 2 will not work with this tutorial. Click
here to view the Webpack changelog.

Webpack is the latest and greatest in front-end development tools. It is a module bundler that works great with the most modern of front-end workflows including Babel, ReactJS, CommonJS, among others. As a beginner to Webpack, this is what I have learned.

This tutorial has been updated to use Babel 6

Getting Started

Webpack Conventions

  1. Webpack works best with NPM, not Bower
  2. Uses a module system (AMD, CommonJS, ES6)

Installing Webpack globally:

npm install webpack -g

The most basic of builds:

In your root directory create 2 files: index.html & app.js

In app.js:

document.write('welcome to my app');console.log('app loaded');

In index.html:

<script src="bundle.js"></script>

Open your console, and run:

webpack ./app.js bundle.js

The above command uses the webpack command (webpack) to reference our app file (./app.js) and the last argument is the name of the file that we want Webpack to create for us (bundle.js).

The above command should have created a file called bundle.js that is our first Webpack bundle! Easy huh?

Defining a config file

A configuration file in Webpack is basically a common.js module. The config file is a place to put all of your configuration, loaders (explained later), and other specific information relating to your build.

In your root directory, create a file called webpack.config.js, and add the following code:

module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"

entry — name of the top level file or set of files that we want to include in our build, can be a single file or an array of files. In our build, we only pass in our main file (app.js).



Nader Dabit
JavaScript Training

Full Stack Product Engineer, Author, Teacher, Director of Developer Relations at Avara