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.

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.

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.


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

comments powered by Disqus