This blog post is outdated (it covers Babel 5). Please read Sect. “Browser setup: ES6 via webpack and Babel” in “Setting up ES6”.

webpack is a client-side module builder and module loader. This blog post shows you how to write ECMAScript 6 code with it.

The code shown here is on GitHub, in the project webpack-es6-demo .

webpack features #

Notable webpack features include:

Supported module formats: AMD, CommonJS Via loader (plug-in): ES6

Supported package managers: Bower, npm

Loaders for non-code: CSS, templates, …

On-demand loading (chunked transfer)

Built-in development server

Installing webpack #

Install webpack:

npm install -g webpack

Enable support for ECMAScript 6 (via Babel):

Per project: npm install babel-loader --save-dev

In your home directory: cd $HOME ; npm install babel-loader

Globally: npm install -g babel-loader

Using webpack and ES6 in a project #

The demo project webpack-es6-demo has the following structure:

webpack-es6-demo/ es6/ Point.js main.js index.html webpack.config.js

The following command compiles the ES6 files es6/Point.js and es6/main.js to a file bundle.js :

webpack --watch

After executing the previous command, you can open index.html in a web browser (directly from the file system if you’d like). index.html runs bundle.js , which means that you get to see what main.js is doing.

In real-world projects, you probably won’t use webpack directly, but via build tools, such as grunt, gulp, etc.

This is the configuration file for webpack:

var path = require ( 'path' ); module .exports = { entry : './es6/main.js' , output : { path : __dirname, filename : 'bundle.js' }, module : { loaders : [ { test : path.join(__dirname, 'es6' ), loader : 'babel-loader' } ] } };

Things work as follows:

Input: is specified via the property entry . This is where the execution of JavaScript code starts.

. This is where the execution of JavaScript code starts. Output: webpack bundles the entry file and everything it depends on into the output file bundle.js (which resides in the same directory as webpack.config.js ).

(which resides in the same directory as ). Support for ES6: is enabled via a the module loader babel-loader . Property test : specifies what files the loader should be used for. Single test: regular expression or string with an absolute path Multiple tests: array of single tests (logical “and”)

.

The HTML file starts JavaScript via the bundle file that was created by webpack.

< html > < head > < meta charset = "UTF-8" > < title > webpack ES6 demo </ title > </ head > < body > < script src = "bundle.js" > </ script > </ body > </ html >

ECMAScript 6 code #

The following two ECMAScript 6 files were packaged into bundle.js .

main.js :

import Point from './Point.js' ; var body = document .querySelector( 'body' ); body.textContent = 'Good point: ' + new Point( 1 , 23 );

Point.js :

class Point { constructor (x, y) { this .x = x; this .y = y; } toString() { return '(' + this .x+ ',' + this .y+ ')' ; } } export default Point;

Note that the paths follow Node.js conventions.

Using npm packages #

You can install packages via npm and use them from your ES6 code, seamlessly. For example: First install lodash.

$ mkdir node_modules $ npm install lodash

Then use it anywhere in your ES6 code:

import { zip } from 'lodash' ; console .log(zip([ '1' , '2' ], [ 'a' , 'b' ]));

Alternatives to webpack #

If webpack is not your cup of tea, there are several capable alternatives for writing client-side ES6 code. For example:

jspm

Browserify with babelify

webpack, jspm and Browserify can also use Traceur instead of Babel, if you want to.