Using Babel and Webpack

In this unit, you modify the existing application and use some new ECMAScript 6 features. You then set up a build environment using Babel and Webpack.

Step 1: Use New ECMAScript 6 Features

1. Open js/app.js in your favorite code editor.

2. Modify the application as follows to use some of the new features in ECMAScript 6:

   • Replace all var definitions with let
   • Replace all function() definitions with arrow functions
   • Replace string concatenation with template strings
   • Do NOT use ECMAScript 6 promises yet. You will do that in the next unit.
     
   If you are not familiar with these features, make sure you complete this tutorial first.

Step 2: Set Up Babel and Webpack

Now that the application uses ECMAScript 6 features, you need to compile it using Babel.

1. Open a command prompt, and navigate (cd) to the es6-tutorial-data directory.

2. Type the following command to install the Babel and Webpack modules:

   npm install babel-core babel-loader babel-preset-es2015 webpack --save-dev
   

3. In the es6-tutorial-data directory, create a new file named webpack.config.js defined as follows:

    var path = require('path');
    var webpack = require('webpack');
    module.exports = {
        entry: './js/app.js',
        output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'app.bundle.js'
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                }
            ]
        },
        stats: {
            colors: true
        },
        devtool: 'source-map'
    };
   

4. Open package.json in your favorite code editor. In the scripts section, add a script named webpack that builds your application using Webpack and Babel. The scripts section should now look like this:

   "scripts": {
       "webpack": "webpack",
       "start": "http-server"
   },
   

5. In the es6-tutorial-data directory, create a build directory to host the compiled version of the application.

   The build process will fail if you don’t create the build directory

Step 3: Build and Run

1. On the command line, make sure you are in the es6-tutorial-data directory, and type the following command to build the app:

    npm run webpack
   

2. Open index.html in your code editor, and modify the <script> tag as follows to load build/app.bundle.js, the compiled version of js/app.js:

   <script src="build/app.bundle.js"></script>
   

3. Make sure your local http server is started, open a browser and access http://localhost:8080.

Solution

The final code for this step is available in this branch.