[解決済み] モジュールのビルドに失敗しました。SyntaxError: 予期しないトークン

質問

reactの初心者です。有線エラーが発生し、困惑しています。私の理解では、以下のindex.jsxの構文には何も問題はありません。

>  7 |          <div>
     |          ^

私のindex.jsは

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
render() {
    return (
        <div>
        <p>Hi Russell!!</p>
        </div>
    );

}
}

ReactDOM.render( <App/>, document.getElementById('app'))

私のpackage.jsonは

const webpack = require('webpack');
const path = require('path');

var APP_DIR = path.resolve(__dirname, 'src/client/app');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }
    ]
}
}

module.exports = config;

可能な限り全ての箇所を見直しました。にもかかわらず、何が間違っているのかがわかりません。まだエラーを投げてきます。このデバッグ方法について、何かヘルプはありますか？

を実行しようとすると、エラーがポップアップ表示されます。

webpack -d

で始めると

npm run serve

ページが何もレンダリングされないまま、ブラウザが開いてしまいます。このため、私は

よろしくお願いします。

解決方法は？

この問題は、以下のように webpack.config.js に追加することで、解決しました。

/*Previous Code*/
query: {
      presets: ['es2015', 'react']
}
/*Remaining closure of brackets*/
module.exports = exports;

しかし、疑問があります。私は、.bablercに以下のように追加していました。

{
 presets: ['es2015', 'react']
}

なぜそれが取られていないのでしょうか？何か提案はありますか？