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:

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

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