title: Module parse failed: Unexpected token using webpack-dev-server
body: <p>I'm trying to follow along the examples in the <a href="https://www.safaribooksonline.com/library/view/learning-redux/9781786462398/" rel="nofollow noreferrer">Learning Redux</a> book.  Unfortunately the latest versions of webpack and babel have all changed and I updated to the latest versions which deviate from the configurations in the book.</p>
  
  <p>I've read the latest documentation from both babel and webpack and I believe I have the correct .babelrc and config.webpack.js that is appropriate.  </p>
  
  <p>But I'm struggling to get jsx to compile with the webpack-dev-server.  I get this error when running <code>npm start</code>:</p>
  
  <pre><code>ERROR in ./src/index.js 
  Module parse failed: Unexpected token (10:4) 
  You may need an appropriate loader to handle this file type. 
  | 
  | ReactDOM.render( 
  |     &lt;h1&gt;hello world!&lt;/h1&gt;, 
  |   document.getElementById('root') 
  | )  
  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src
  </code></pre>
  
  <p>Here is my full setup: <a href="https://github.com/homanchou/learning_redux" rel="nofollow noreferrer">https://github.com/homanchou/learning_redux</a> </p>
  
  <p>package.json</p>
  
  <pre><code>{
   "name": "learningredux",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "scripts": {
      "start": "webpack-dev-server --open --mode development",
      "build": "webpack --mode production",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.4",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-preset-env": "^1.6.1",
      "babel-preset-react": "^6.24.1",
      "eslint": "^4.19.1",
      "eslint-plugin-react": "^7.7.0",
      "webpack": "^4.6.0",
      "webpack-cli": "^2.1.2",
      "webpack-dev-server": "^3.1.3"
    },
    "dependencies": {
      "npm": "^6.0.0",
      "react": "^16.3.2",
      "react-dom": "^16.3.2",
      "redux": "^4.0.0"
    }
  }
  </code></pre>
  
  <p>babelrc.</p>
  
  <pre><code>{
   "presets": ["env", "react"],
   "plugins": [ "transform-object-rest-spread" ]
  }
  </code></pre>
  
  <p>config.webpack.js</p>
  
  <pre><code>const path = require('path')
  module.exports = {
      entry: './src/index.js',
      output: {
          path: path.resolve('dist'),
          filename: 'main.js'
      },
      module: {
          rules: [{
              test: /\.js$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader"
              }
          }]
      }
  }
  </code></pre>
  
  <p>Any help is appreciated.</p>