title: How do I get Webpack to transpile ES6 code?
body: <p>I'm pretty new to Webpack, and I'm just trying to get a simple project off the ground here. I'm getting the following error:</p>
  
  <pre><code>ERROR in ./index.js
  Module parse failed: /Users/jay/Documents/personal_projects/open_phil_grants_visualizer/index.js Unexpected token (6:16)
  You may need an appropriate loader to handle this file type.
  | import App from './app';
  | 
  | ReactDOM.render(&lt;App /&gt;, document.getElementById('content'));
  | 
   @ multi (webpack)-dev-server/client?http://localhost:8080 ./index.js
  </code></pre>
  
  <p>Here is my <code>webpack.config.js</code>:</p>
  
  <pre><code>module.exports = {
      entry: './index.js',
      output: {
          path: __dirname,
          filename: 'bundle.js'
      },
      devtool: 'source-map'
  };
  </code></pre>
  
  <p>the dependencies in my <code>package.json</code>:</p>
  
  <pre><code>"dependencies": {
    "d3": "^4.9.1",
    "lodash": "^4.17.4",
    "react": "^15.6.1",
    "react-d3-basic": "^1.6.11",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "webpack-dev-server": "^2.4.5"
  }
  </code></pre>
  
  <p>Here is my <code>index.js</code>:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import App from './app';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('content'));
  </code></pre>
  
  <p>here is <code>app.js</code>:</p>
  
  <pre><code>import React from 'react';
  
  class App extends React.Component {
    render() {
      return(
        &lt;h2&gt;
          Hello from the App component!
        &lt;/h2&gt;
      )
    }
  }
  
  export default App;
  </code></pre>
  
  <p>How can I get this thing going?</p>