title: ES6 modules, babel/webpack. Import/Export statements not working
body: <p>Ok so am learning react, es6 and webpack/babel. I got my webpack.config set up below:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const merge = require('webpack-merge');
  const validate = require('webpack-validator');
  const parts = require('./config/webpack-parts');
  
  const PATHS = {
      app: path.join(__dirname, 'app'),
      build: path.join(__dirname, 'build')
  };
  
  const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
      template: PATHS.app + '/index.html',
      filename: 'index.html',
      inject: 'body'
  });
  
  const common = {
      entry: {
          app: PATHS.app
  
      },
  
      output: {
          path: PATHS.build,
          filename: '[name].js'
  
      },
  
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  exclude: /node_modules/,
                  loader: "babel-loader"
              }
          ]
      },
  
      plugins: [HTMLWebpackPluginConfig]
  
  };
  
  var config;
  
  switch(process.env.npm_lifecycle_event) {
      case 'build':
          config = merge(
              common,
              {
                  devtool: 'source-map',
                  output: {
                      path: PATHS.build,
                      filename: '[name].[chunkhash].js',
                      // This is used for require.ensure. The setup
                      // will work without but this is useful to set.
                      chunkFilename: '[chunkhash].js'
                  }
              },
              parts.clean(PATHS.build),
              parts.extractBundle({
                  name: 'vendor',
                  entries: ['react']
              }),
  
              parts.minify(),
              parts.extractCSS(PATHS.app)
          );
          break;
      default:
          config = merge(
              common,
              parts.setupCSS(PATHS.app),
              {
                  devtool: 'eval-source-map'
              },
              parts.devServer({
                  // Customize host/port here if needed
                  host: process.env.HOST,
                  port: process.env.PORT
              })
          );
          break;
  }
  
  module.exports = validate(config);
  </code></pre>
  
  <p>The 'config/webpack-parts' file is just some extra modules/plugins and not needed for the question. Was just aiming to make this reusable across projects. I got babel set up also, and the .babelrc file is below</p>
  
  <pre><code>{
    "presets": [
      "es2015",
      "react"
    ]
  }
  </code></pre>
  
  <p>I have also got all the nesscary babel/webpack plugins installed inside my package.json file:</p>
  
  <pre><code> "devDependencies": {
      "babel-core": "^6.11.4",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.9.0",
      "babel-preset-react": "^6.11.1",
      "clean-webpack-plugin": "^0.1.10",
      "css-loader": "^0.23.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "html-webpack-plugin": "^2.22.0",
      "style-loader": "^0.13.1",
      "uglify-loader": "^1.3.0",
      "webpack": "^1.13.1",
      "webpack-dev-server": "^1.14.1",
      "webpack-merge": "^0.14.1",
      "webpack-validator": "^2.2.7"
    },
    "dependencies": {
      "react": "^15.3.0",
      "react-dom": "^15.3.0"
    }
  </code></pre>
  
  <p>So now the problem. I am testing out that this all works and converts es6+react code into es5 using babel etc. I have set up test 'hello.js' and 'world.js' files and I am importing them into my entry/main file 'index.js'. This is where the error is.</p>
  
  <p>hello.js</p>
  
  <pre><code>import React, {Component} from 'react';
  
  export class Hello extends Component {
  
      render() {
          return (
              &lt;h1&gt;Hello&lt;/h1&gt;
          )
      }
  }
  </code></pre>
  
  <p>world.js</p>
  
  <pre><code>import React, {Component} from 'react';
  
  export class World extends Component {
      render() {
          return (
              &lt;h1&gt;World&lt;/h1&gt;
          )
      }
  }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import Hello from 'hello';
  import World from 'world';
  
  ReactDOM.render(&lt;Hello/&gt;, document.getElementById('hello'));
  ReactDOM.render(&lt;World/&gt;, document.getElementById('world'));
  </code></pre>
  
  <p>Pre web pack index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Weather App&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="hello"&gt;&lt;/div&gt;
      &lt;div id="world"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am getting the following error on web pack when I run web pack to do its thing. </p>
  
  <pre><code>ERROR in ./app/index.js
  Module not found: Error: Cannot resolve module 'hello' in /Users/Foysal/Google Drive/Learning Projects/ReactJS-Tutorial/weather-app/app
   @ ./app/index.js 11:13-29
  </code></pre>
  
  <p>I get a similar error for the 'world.js' file and i have no clue what is wrong with the import/export statements. I am just new to es6 modules but I have exported and imported correctly as far as I am aware. I would appreciate any help, thank you. </p>