title: Webpack error with react
body: <p>I am trying to configure webpack according to this <a href="https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement" rel="noreferrer">tutorial</a> and keep getting the same error.  I am having trouble debugging these 2 messages:</p>
  
  <pre><code>ERROR in ./app.js
  Module parse failed: /path/react/react-webpack-babel/app/app.js Line 1: Unexpected reserved word
  You may need an appropriate loader to handle this file type.
  | import React from "react";
  | import Greeting from "./greeting";
  |
  
  ERROR in ./index.html
  Module parse failed: /path/react/react-webpack-babel/app/index.html Line 1: Unexpected token &lt;
  You may need an appropriate loader to handle this file type.
  | &lt;!DOCTYPE html&gt;
  | &lt;html&gt;
  |
  </code></pre>
  
  <p>Here is my <em>webpack.configure.js</em></p>
  
  <pre><code>module.exports = {
    context: __dirname + '/app',
    entry: {
      javascript: "./app.js",
      html: "./index.html"
    },
    output: {
      filename: 'app.js',
      path: __dirname + '/dist'
    },
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      },
      {
        test: /\.jsx$/,
        loaders: ['babel-loader']
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]"
      }
    ]
  }
  </code></pre>
  
  <p>Here is the <em>react components</em></p>
  
  <p><em>app/greeting.js</em></p>
  
  <pre><code>import React from "react/addons";
  
  export default React.createClass({
    render: function() {
      return (
        &lt;div className="greeting"&gt;
          Hello, {this.props.name}!
        &lt;/div&gt;
      );
    },
  });
  </code></pre>
  
  <p><em>app/app.js</em></p>
  
  <pre><code>import React from "react/addons";
  import Greeting from "./greeting";
  
  React.render(
    &lt;Greeting name="World"/&gt;,
    document.body
  );
  </code></pre>
  
  <p><em>app/index.html</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Webpack + React&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;&lt;/body&gt;
  
    &lt;script src="app.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>In case it's helpful, here's my package.json with dependencies</p>
  
  <pre><code>{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "private": true,
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "Me",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^5.8.22",
      "babel-loader": "^5.3.2",
      "file-loader": "^0.8.4",
      "webpack": "^1.11.0"
    },
    "dependencies": {
      "react": "^0.13.3"
    }
  }
  </code></pre>