Webpack + React + Node - error "Unexpected token import"
<p>I'm newbie to Reactjs and webpack. I'm trying to do a sample app using Node and React. I have chosen Webpack as module bundler.<br>
This is my project structue<br>
<strong><em>Project</em></strong>  </p>

<pre><code>|--index.html  
|--package.json  
|--server.js  
|--webpack.config.js  
|--app/main.js    
|--app/routes.js    
|--app/components/login.js  
</code></pre>

<blockquote>
  <p>Contents of package.json</p>
</blockquote>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{
  "version": "1.0.0",
  "description": "learn",
  "main": "server.js",
  "dependencies": {
    "body-parser": "^1.14.1",
    "bootstrap": "^3.3.7",
    "express": "^4.14.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "babel-cli": "^6.16.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.1.18",
    "babel-register": "^6.3.13",
    "babelify": "^7.2.0",
    "nodemon": "^1.11.0",
    "webpack": "^1.13.2"
  },
  "scripts": {
    "watch": "nodemon server.js",
    "start": "node server.js"
  }
}</code></pre>
</div>
</div>
</p>

<p>Contents of webpack.config.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",
    output: {

        filename: "./build/bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel",
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
}</code></pre>
</div>
</div>
</p>

<p>server.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var express = require('express');
var path = require('path');
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var routes = require('./app/routes');

var app = express();

app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
    console.log('Express server listening on port ' + app.get('port'));
});

app.get('/',function(req, res) {
    res.send('Hello');
});

app.get('/login',function(req, res) {
   res.send('Login page using react');
});</code></pre>
</div>
</div>
</p>

<p>main.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
import Router from 'react-router';
import ReactDOM from 'react-dom';
import routes from './routes';

ReactDOM.render(&lt;Router&gt;routes&lt;/Router&gt;, document.getElementById('app'));</code></pre>
</div>
</div>
</p>

<p>routes.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
import {Route} from 'react-router';
import Login from './components/login';
//import Home from './components/Home';

export default (
    &lt;Route path="/login" component={Login}&gt;

    &lt;/Route&gt;
);</code></pre>
</div>
</div>
</p>

<p>login.js  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
import ReactDOM from 'react-dom';

class Login extends React.Component {
    render() {
        return (
            &lt;div className="container"&gt;
                &lt;div className="row"&gt;
                    &lt;div className="col-sm-5"&gt;
                        &lt;strong&gt;Username&lt;/strong&gt;
                    &lt;/div&gt;
                    &lt;div className="col-sm-5"&gt;
                        &lt;input type='text' className='form-control'/&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

            &lt;/div&gt;
        )
    }
}

export default Login;</code></pre>
</div>
</div>
</p>

<pre><code>When I do "webpack -w" seems to be working fine.

when trying to start node using "npm start", says   

    /Project/app/routes.js:1  
    (function (exports, require, module, __filename, __dirname) { import React from 'react';  ^^^^^^
    SyntaxError: Unexpected token import  

I have no idea about why node is not picking up babel's import? Couldn't find anything on the internet and hence posting this question. I badly need a help.
</code></pre>

<p>Thanks in advance.</p>