title: Babel doesn't seem to translate JSX?
body: <p>I'm following the tutorial on frontendmasters.com and tried to simplify one of the setups there. I see the following error when I type <code>yarn build</code>, which I assume is because babel didn't get rid of the JSX prior to running webpack:</p>
  
  <pre><code>ERROR in ./js/ClientApp.jsx
  Module build failed: SyntaxError: Unexpected token (5:25)
  
    3 | import { BrowserRouter, Route, Switch } from 'react-router-dom';
    4 | 
  &gt; 5 | const HelloWorld = () =&gt; &lt;h1&gt;Hello World!&lt;/h1&gt;;
      |                          ^
    6 | 
    7 | const App = () =&gt; (
    8 |   &lt;BrowserRouter&gt;
  </code></pre>
  
  <p>My <code>package.json</code> for the yarn build is:</p>
  
  <pre><code>{
    "scripts": {
      "format": "prettier --list-different --single-quote --print-width=120 webpack.config.js \"js/**/*.{js,jsx}\"",
      "lint": "eslint **/*.{js,jsx} --quiet",
      "watch": "webpack --watch",
      "build": "webpack -p",
      "build:dev": "webpack -d"
    },
    "name": "foobar",
    "version": "1.0.0",
    "description": "",
    "main": "",
    "repository": "",
    "author": "",
    "license": "MIT",
    "dependencies": {
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "react-redux": "^5.0.7",
      "react-router-dom": "^4.2.2",
      "redux": "^3.7.2",
      "webpack": "^3.11.0"
    },
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-eslint": "^8.2.1",
      "babel-loader": "^7.1.2",
      "eslint": "^4.18.0",
      "eslint-config-prettier": "^2.9.0",
      "eslint-config-react": "^1.1.7",
      "eslint-loader": "^1.9.0",
      "eslint-plugin-flow": "^2.29.1",
      "eslint-plugin-flowtype": "^2.44.0",
      "eslint-plugin-jsx-a11y": "^6.0.3",
      "eslint-plugin-prettier": "^2.6.0",
      "eslint-plugin-react": "^7.6.1",
      "prettier": "^1.10.2"
    }
  }
  </code></pre>
  
  <p>My webpack.config.js is:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
    context: __dirname,
    entry: "./js/ClientApp.jsx",
    devtool: "cheap-eval-source-map",
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json']
    },
    stats: {
      colors: true,
      reasons: true,
      chunks: true
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loaders: 'babel-loader',
        }
      ]
    }
  }
  </code></pre>
  
  <p>My <code>js/ClientApp.jsx</code> is just a simple syntactically valid file, which I'm leaving out, since StackOverflow is already complaining that this message is mostly code.</p>
  
  <p>Does anyone have an idea what I'm doing wrong and why babel isn't correctly handling the JSX?</p>