Writing client-side ES6 with webpack

By Axel Rauschmayer

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:

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

Source:: 2ality