title: Webpack 2 (beta) fails to handle JSX despite being provided with a Babel loader with React preset
body: <p>I have used <a href="https://webpack.js.org/guides/hmr-react/" rel="nofollow noreferrer">this guide from Webpack docs</a> as a reference to create a Webpack config with HMR, but I get an error stating that I don't have a loader for JSX. I have installed all of the needed packages listed in the reference. Note, I've also tried putting my Babel config in <code>.babelrc</code> in the first place, but it gave me the same results.</p>
  
  <pre><code>ERROR in ./src/index.js
  Module parse failed: /Users/macbem/Documents/Coding/Back/typeahead-todo/src/index.js Unexpected token (10:2)
  You may need an appropriate loader to handle this file type.
  |
  | ReactDOM.render(
  |   &lt;AppContainer&gt;
  |     &lt;App /&gt;
  |   &lt;/AppContainer&gt;,
   @ multi main
  </code></pre>
  
  <p>My config files are in the root of the project, <code>.js</code> files are in <code>/src/</code>. My webpack config looks as follows:</p>
  
  <pre><code>// webpack.config.js
  const { resolve } = require('path');
  const webpack = require('webpack');
  
  module.exports = {
    entry: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './index.js'
    ],
    output: {
      filename: 'bundle.js',
      path: resolve(__dirname, 'dist'),
      publicPath: '/'
    },
    context: resolve(__dirname, 'src'),
    devtool: 'inline-source-map',
    devServer: {
      hot: true,
      contentBase: resolve(__dirname, 'dist'),
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                "presets": [
                    [ "es2015", { "modules": false } ],
                    "stage-2",
                    "react"
                  ],
                "plugins": [
                  "react-hot-loader/babel"
                ]
              }
            },
          ],
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader?modules',
            'postcss-loader',
          ],
        },
      ],
    },
  
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin()
    ],
  };
  </code></pre>
  
  <p>Also, this is my index.js file:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import { AppContainer } from 'react-hot-loader';
  // AppContainer is a necessary wrapper component for HMR
  
  import App from './components/App';
  
  ReactDOM.render(
    &lt;AppContainer&gt;
      &lt;App /&gt;
    &lt;/AppContainer&gt;,
    document.getElementById('root')
  );
  
  // Hot Module Replacement API
  if (module.hot) {
    module.hot.accept('./components/App', () =&gt; {
      const NewApp = require('./components/App').default
      render(NewApp)
    });
  }
  </code></pre>