Writing client-side ES6 with webpack

By ss - April 01, 2015

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.

webpack.config.js

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.

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).

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”)

HTML

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


    <!doctype html>
    <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.

Search This Blog

psychology dector