Adding babel to frontend workflow; Upgradging Webpack to version 2.

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": ["es2015", "stage-2"],
+  "env": {
+    // only happens if NODE_ENV is undefined or set to 'development'
+    "development": {
+      // ignored when NODE_ENV is production!
+  	}
+  }
+}

config/webpack-config.js

@@ -19,17 +19,26 @@ var modernConf = {
   // so it needs to be defined here as an external script to ignore for
   // unmet dependency references.
   externals: { jquery: 'jQuery' },
-  context:   path.join( __dirname, '/../', paths.unprocessed, JS_ROUTES_PATH ),
-  entry:     scriptsManifest.getDirectoryMap( paths.unprocessed +
-                                              JS_ROUTES_PATH ),
+  cache: true,
+  context: path.join( __dirname, '/../', paths.unprocessed, JS_ROUTES_PATH ),
+  entry: scriptsManifest.getDirectoryMap( paths.unprocessed + JS_ROUTES_PATH ),
+  module: {
+    rules: [ {
+      test: /\.js$/,
+      use: [ {
+        loader: 'babel-loader?cacheDirectory=true'
+      } ],
+      exclude: /node_modules/
+    } ]
+  },
   output: {
-    path:     path.join( __dirname, 'js' ),
+    path: path.join( __dirname, 'js' ),
     filename: '[name]'
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin( COMMON_BUNDLE_NAME ),
-    new webpack.optimize.CommonsChunkPlugin( COMMON_BUNDLE_NAME,
-                                             [ COMMON_BUNDLE_NAME ] ),
+    new webpack.optimize.CommonsChunkPlugin( {
+      name: COMMON_BUNDLE_NAME
+    } ),
     // Change `warnings` flag to true to view linter-style warnings at runtime.
     new webpack.optimize.UglifyJsPlugin( {
       compress: { warnings: false }

gulp/tasks/scripts.js

@@ -16,6 +16,7 @@ var gulpReplace = require( 'gulp-replace' );
 var gulpUglify = require( 'gulp-uglify' );
 var handleErrors = require( '../utils/handle-errors' );
 var paths = require( '../../config/environment' ).paths;
+var webpack = require( 'webpack' );
 var webpackConfig = require( '../../config/webpack-config.js' );
 var webpackStream = require( 'webpack-stream' );
 var configLegacy = require( '../config.js' ).legacy;
@@ -30,7 +31,7 @@ var configLegacy = require( '../config.js' ).legacy;
  */
 function _processScript( config, src, dest ) {
   return gulp.src( paths.unprocessed + src )
-    .pipe( webpackStream( config ) )
+    .pipe( webpackStream( config, webpack ) )
     .on( 'error', handleErrors )
     .pipe( gulp.dest( paths.processed + dest ) )
     .pipe( browserSync.reload( {
@@ -104,7 +105,7 @@ function scriptsOnDemand() {
  */
 function scriptsNonResponsive() {
   return gulp.src( paths.unprocessed + '/js/routes/on-demand/header.js' )
-    .pipe( webpackStream( webpackConfig.onDemandHeaderRawConf ) )
+    .pipe( webpackStream( webpackConfig.onDemandHeaderRawConf, webpack ) )
     .on( 'error', handleErrors )
     .pipe( gulpRename( 'header.nonresponsive.js' ) )
     .pipe( gulpReplace( 'breakpointState.isInDesktop()', 'true' ) )
@@ -142,7 +143,7 @@ function scriptsEs5Shim() {
       output: {
         filename: 'es5-shim.js'
       }
-    } ) )
+    }, webpack ) )
     .pipe( gulpUglify() )
     .on( 'error', handleErrors )
     .pipe( gulp.dest( paths.processed + '/js/' ) )