title: Webpack failed to compile
body: <p>I have just started to learn React and I'm implementing it with Webpack.</p>
  
  <p>Here are the <code>devDependencies</code> from my <code>package.json</code>:</p>
  
  <pre><code>"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react-hot-loader": "^1.3.1",
    "react-scripts": "1.0.7",
    "serve": "^5.2.4",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  </code></pre>
  
  <p>Here is my <code>webpack.config.js</code>:</p>
  
  <pre><code>module.exports = {
      context: __dirname + "/src",
      entry: './index.js',
  
      output: {
          filename: "index.js",
          path: __dirname + '/dist'
      },
  
      module: {
          loaders: [
          {
              test: /\.js$/,
              exclude: /node_modules/,
              loaders: ["react-hot-loader", "babel-loader"],
          }
          ],
      },
  }
  </code></pre>
  
  <p>Here is <code>.babelrc</code></p>
  
  <pre><code>{
    "presets": [
      "es2015",
      "react"
    ]
  }
  </code></pre>
  
  <p>Now when I run <code>npm start</code> it raises this error</p>
  
  <pre><code>ERROR in ./src/index.css
  Module parse failed: /home/tps/ReactApps/login-app/src/index.css Unexpected token (1:5)
  You may need an appropriate loader to handle this file type.
  | body {
  |   margin: 0;
  |   padding: 0;
  @ ./src/index.js 21:0-22
  @ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js
  
  ERROR in ./src/App.js
  Module not found: Error: Can't resolve './notFound' in '/home/tps/ReactApps/login-app/src'
  @ ./src/App.js 33:16-37
  @ ./src/index.js
  @ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js
  
  ERROR in ./src/App.css
  Module parse failed: /home/tps/ReactApps/login-app/src/App.css Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  | .App {
  |   text-align: center;
  | }
  @ ./src/App.js 19:0-20
  @ ./src/index.js
  @ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js
  </code></pre>
  
  <p>Please help me to solve this.</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p><code>webpack.config.js</code></p>
  
  <pre><code>module.exports = {
    context: __dirname + "/src",
    entry: './index.js',
  
    output: {
      filename: "index.js",
      path: __dirname + '/dist'
    },
  
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ["react-hot-loader", "babel-loader"],
        }
      ],
      rules: [
        {
          test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ]
        }
      ]
    },
  }
  </code></pre>
  
  <p><code>package.json</code></p>
  
  <pre><code> "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "react-hot-loader": "^1.3.1",
    "react-scripts": "1.0.7",
    "serve": "^5.2.4",
    "style-loader": "^0.18.2",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  </code></pre>