In this series you will learn what Webpack is, why it's so awesome, and how to get started using it on your own projects. This is too long for one post so it will be broken up into multiple parts. This part will contain the following:

  • Whats webpack
  • Installation
  • Configuring / First Build
  • Watching Files and Production Builds
  • Importing NPM Modules

What's webpack?

Webpack is a “module bundler ”, it allows you to bring all your site's files and dependencies together using ES6 import statements. Don't get confused though, it imports a lot more than simply JavaScript. Assuming you provide the “loaders” it can import almost anything: CSS, images, HTML, NPM modules, fonts, etc.

Loaders and plugins can do more than import though. You can tell webpack to compile your Javascript with Babel, to compile your Sass, to auto prefix CSS, and a whole bunch more. They have plugins and loaders for everything, allowing you to make Webpack your sole build system, replacing things like grunt or gulp.

Getting the starter files

Before we begin, we're going to need some starter files. Clone or download the following git repository to your desktop.

Click here to get the repo

Here's a quick breakdown of what you downloaded:

  • js/index.js - webpack entry point where we'll place our import statements.
  • js/hello.js - JavaScript partial to be imported.
  • js/world.js - JavaScript partial to be imported.
  • build/index.html - HTML file to test our bundles

Installing webpack

Now that we have some starter files, lets cd into the project directory and install Webpack. Webpack is a NPM module so we'll have to initiate NPM before installing.

nodejs and npm logos

Note: Before running the commands below, insure that you have Node JS installed.

cd ~/Desktop
cd getting-started-with-webpack
npm init
npm install webpack --save-dev

Your project directory should now contain a package.json file, a node_modules folder, and possibly a package-lock.json file.

Now that we have Webpack installed we can add a NPM script to run the webpack command. Open your package.json file and add a script build which runs webpack. The completed file should look similar to this:

{
    "name": "getting-started-with-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^3.10.0"
    }
}

Now anytime we run npm run build from terminal it will run the webpack command and bundle our modules.

Configuring webpack and our first build

We configure webpack in a file called webpack.config.js. Create this file in the root of your project directory. Open the file and copy and paste the following code to it:

// webpack.config.js
const path = require('path')

module.exports = {
    entry: './js/index', // Our entry point
    output: {
        path: path.resolve(__dirname, 'build'), // Output directory
        filename: 'bundle.js' // Output file
    }
}

In our config file we're giving Webpack an entry point and output. When we run npm run build, Webpack will go inside our index.js file (the entry point) retrieve all imports inside, and output a single file containing everything to dist/bundle.js.

Before we run the command we need to import our js partials. Open js/index.js and add the following two lines:

import './hello.js'
import './world.js'

Save and run npm run build from terminal. It should output something like this:

webpack command output

Look inside your build folder and you should have a bundle.js which contains both our imports! Open the index.html in a browser and check console to verify it's working. You should see “Hello” and “World”.

Hello World in console

Importing NPM Modules

The coolest thing about Webpack is that you can import NPM modules, this gives us an awesome system of managing our dependencies.

Let's try importing jQuery. To start we'll have to install it as an NPM module.

npm install jquery --save

Now we can import jQuery in any of our files. Lets do so in hello.js. At the top add the following line to import jQuery.

import $ from 'jquery'

Now at the bottom lets add a line to test that jQuery is imported and working.

console.log($)

Run npm run build again, then refresh the browser window and verify there's no errors in console. We can now import and use jQuery in any file we please.

Watching files and production builds

Running npm run build every time we make a change gets annoying real quick. The webpack command accepts several flags that do different things. We can add the -w flag to watch files for changes or the -p to create a production ready build that are minified.

Lets open our package.json file and add a second script called dev which runs webpack with the -w flag. Lets also add the -p flag to our existing build script.

{
    "name": "getting-started-with-webpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack -p",
        "dev": "webpack -w",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^3.10.0"
    }
}

Now we can run npm run dev and webpack will watch for file changes and recompile for each change. Our existing npm run build will now output a minified bundle.

Conclusion and moving forward

That's it for part 1! In the next post will be all about loaders and plugins, allowing us to use Webpack for much more than importing JavaScript. Stay Tuned!