webpack、babelでプロジェクトを設定できません

Question

私はreact、bower、webpackを使ってサンプルアプリケーションを作っています。

私はこのindex.jsxファイルがあります：

import React from 'react'; 
import {ReactDOM} from 'react-dom'; 
import AwesomeComponent from './AwesomeComponent.jsx'; 

    var App = React.createClass({ 
     render: function() { 
     return (<p> Hello React!</p>); 
     } 
    }); 

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

私は次のようにインストール：

npm i babel-loader babel-preset-es2015 babel-preset-react -S 

マイwebpack.config.jsは次のとおりです。

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

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

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

module.exports = config; 

私の問題はindex.jsxファイルに私がいることです取得：

ERROR in ./src/client/app/index.jsx 
Module parse failed: /path/to/file/src/client/app/index.jsx Unexpected token (7:12) 
You may need an appropriate loader to handle this file type. 

しかし、私はバワーパッケージをインストールして、デフォルトのローダーを作成しました。

これはまだどうしてですか？

Answer 1

ローダーの設定を「モジュール」キーの下に置く必要があります。

... 
output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
}, 
module: { 
    loaders: [{ 
    test: /\.jsx?/, 
    loader: 'babel', 
    include : APP_DIR, 
    query: { 
     presets: ['react', 'es2015'] 
    } 
    }] 
} 
...