Webpack，React，JSX，Babel-意外令牌<

这就是我使用ExpressJS所拥有的：

|-- app
|   |-- index.js
|-- node_modules
|   |-- babel-core
|   |-- babel-loader
|   |-- babel-preset-react
|   |-- express
|   |-- react
|   |-- react-dom
|   |-- webpack
|-- public
|   |-- js
|   |   |-- app.js
|   |-- index.html
|-- .babelrc
|-- index.js
|-- package.json
|-- webpack.config.js

/webpack.config.js

module.exports = {
    entry: [
        './app/index.js'
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            include: __dirname + '/app',
            loader: "babel-loader",
            query: {
                presets:['react']
            }
        }]
    },
    output: {
        filename: "app.js",
        path: __dirname + '/public/js'
    }
};

/app/index.js

var React = require("react");
var ReactDOM = require("react-dom");
var People = React.createClass({
    ...
});
ReactDOM.render(<People />, document.getElementById('app'));

/.babelrc

{
  "presets": [
    "react"
  ]
}

当我运行webpack时，我得到：

模块解析失败：/app/index.js意外的令牌<您可能需要适当的加载器来处理此文件类型。

当我替换它时<People />，React.createElement(People, {})它就很好了。

我有babel-preset-react模块。我有presets:['react']与babel-loader加载器。我有.babelrc文件。

为什么webpack / babel无法解析<People />JSX ..？