A Simple ES6 (ES2015) Javascript Project (webpack edition)

David Salgado

In this post, I’m going to walk through creating a very simple Javascript project. The project itself is not going to do anything much, but the point (as always, with javascript) is to figure out how to get the build pipeline set up correctly. I’m going to try to use a minimum of components, and in the end I want the following;

A static javascript application, deliverable as two files;

index.html

application.js

The application should work in all modern browsers, and should have its own stylesheet.

When working on the site, I want to;

write my javascript using ES2015

keep my javascript classes in separate files

For the purposes of this exercise, all the application needs to do is write a message into a web page. The point is to use ES2015 to do that.

Getting started

Let’s start by setting up a fresh project;

$ mkdir hello-es2015
$ cd hello-es2015
$ git init

Let’s add some directories

$ mkdir src dist
$ touch src/.gitkeep dist/.gitkeep

We’re going to be adding some npm packages, but we don’t want them in our git repo.

<html><head><metaname="viewport"content="width=500,initial-scale=1.0,user-scalable=yes"><title>Hello ES2015</title></head><body><main><p>This is not very interesting</p></main></body></html>

Let’s commit what we’ve got, so far

$ git add .
$ git commit -m "Initial commit"

All very simple. If you open src/index.html in your browser, you should see an uninspiring web page with no styling and with nothing logged to the console.

Webpack

We’re going to need a build tool to take our separate javascript classes and combine them. We’re also going to need to transpile the ES2015 javascript into the ES5 code supported by the majority of browsers. So, let’s create a build system to generate our dist/ files.

We’re going to use webpack, so first we need to install it as a dependency;

$ npm install webpack --save-dev

The default configuration file for webpack is webpack.config.js so let’s create that now;

This says that src/app.js is the entrypoint of the source code for our application, and that we want the output bundle to be called application.js in the dist/ folder. Now, when you run webpack, you should see output like this;

Now, after you run webpack your dist folder should contain both an application.js file and an index.html file. If you open up the index.html file in a browser, you should see the web page, and some output on the javascript console.

Adding CSS styles

The page doesn’t have our styling, though. To fix that, we need to add a couple of webpack loaders so that webpack knows how to take our CSS file and bundle the styling into the dist/application.js file.

npm install --save-dev css-loader
npm install --save-dev style-loader

To use these, we need to add a module entry to our webpack.config.js file, like this;

Webpack won’t build anything we don’t need, so we need to tell it that we want it to include our CSS. We can do that by modifying src/app.js like this;

importcssfrom'./stylesheet.css'console.log("Hello from app.js")

Now, when you run webpack, you should still have just the two files in dist, but webpack will have embedded the styles from src/stylesheet.css in the application.js file. Load up dist/index.html and it should have white text on a black background.

ES2015

Webpack handles ES2015 javascript, but it won’t transpile it to ES5 until we tell it to do that. We can prove that by using some ES2015 features in our javascript.