compile es6/es2015 with babel

app/assets/javascripts/webpack/bundle.js

-require('./hello_world');
+var HelloWorld = require('./hello_world').default;
+
+var message = new HelloWorld('webpack');
+message.sayHello();

app/assets/javascripts/webpack/hello_world.js

-/* eslint-disable no-console */
-
-console.log('hello world!');

app/assets/javascripts/webpack/hello_world.js.es6

+/* eslint-disable no-undef, no-alert */
+
+export default class HelloWorld {
+  constructor(name) {
+    this.message = `Hello ${name}!`;
+  }
+
+  sayHello() {
+    alert(this.message);
+  }
+}

config/webpack.config.js

@@ -22,6 +22,19 @@ var config = {
     filename: IS_PRODUCTION ? '[name]-[chunkhash].js' : '[name].js'
   },
 
+  module: {
+    loaders: [
+      {
+        test: /\.es6$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015']
+        }
+      }
+    ]
+  },
+
   plugins: [
     // manifest filename must match config.webpack.manifest_filename
     // webpack-rails only needs assetsByChunkName to function properly
@@ -32,7 +45,11 @@ var config = {
       modules: false,
       assets: true
     })
-  ]
+  ],
+
+  resolve: {
+    extensions: ['', '.js', '.es6', '.js.es6']
+  }
 }
 
 if (!IS_PRODUCTION) {

package.json

@@ -7,6 +7,9 @@
     "eslint-report": "npm run eslint -- --format html --output-file ./eslint-report.html"
   },
   "dependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.16.0",
     "stats-webpack-plugin": "^0.4.2",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.2"