Webpack: One Thing At a Time.

Every time I tried to learn about build scripts, bundlers or other javascript doohickeys I had trouble finding tutorials that didn’t want me to setup everything.

When you’re learning, you don’t need to setup a React/Redux app with Sass and Flow and Jest tests. Sometimes you just want to do one thing at a time.

This tutorial is about setting up a Webpack project and we’re only going to do the minimum possible.

Webpack is a bundler. All your Javascript, HTML, CSS, Sass, JSX or other files will be combined into preferably one or two files.

Apart from letting you use technologies like Sass or React, Webpack lets you divide up your files easily and use ES6 module syntax like:

import myThing from './myThing.js'

Installation

To install Webpack, just run:

npm install webpack -g

The Config File

Just having Webpack is not enough. In your project, you will need a webpack.config.js file. This is where you explain to webpack what you want it to do.

I’m starting with a file structure that looks like the following:

Let’s start with an incredibly simple example:

module.exports = {
  entry: './src/app.js', // This tells webpack where to start
  output: {
    filename: './build/bundle.js' // This tells webpack the output
  }
};

Just in case, if you haven’t seen a module.exports syntax before, you should check out the Modules documentation for Node:

Modules | Node.js v7.4.0 Documentation

Let’s try it out!

Try running $ webpack in the command line in your project folder. (Note that I use the $ to signify that this should be run from the command line; don’t include the $ in your command) You will see something like:

You should notice that webpack created a build folder for us with a bundle.js file inside. At the moment you don’t need to concern yourself with the code that it generated for you.

Let’s make something happen.

Create a new file called hello.js in the same folder as your app.js .

In that file, let’s define a function and then export it.

// src/hello.js
function myFunction() {
  console.log("Hello Webpack!")
}
module.exports = myFunction

Then, in your app.js , let’s require that function and call it.

// src/app.js
var myFunction = require('./hello.js')
myFunction();

If we run $ webpack now, we should see our code meshed up with a bunch of stuff we didn’t write.

Now for some HTML.

While this next part isn’t the best practice (we’ll get to how we should properly do this another time), let’s make an index.html file in the build folder.

Inside that file, let’s just include our script in one line.

<!-- build/index.html -->
<script src="bundle.js"></script> 

In mine, I only included the script tag. Most browsers will include all the other html and body tags for you anyway, so when playing around like this, we don’t need to worry about them.

If you open up that file in chrome and open the dev tools with cmd-opt-i on Mac or ctrl-shift-i on Windows, you should see our console.log output in the console!

Having trouble? All the code that I used is available on Github.