почему загрузчик babel и jsx не работает в веб-пакете версии 3.x в реагирующем приложении

Package.json это файл json моего пакета. Я уже установил npm install --save-dev babel-loader babel-core в своем приложении /* Package.json*/

    {
    "name": "tripdetail",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-dev-server",
        "prod": "webpack -p"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel": "^6.23.0",
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.6.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.4",
        "extract-text-webpack-plugin": "^3.0.0",
        "html-webpack-plugin": "^2.30.1",
        "node-sass": "^4.5.3",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.18.2",
        "webpack": "^3.5.4",
        "webpack-dev-server": "^2.7.1"
    },
    "dependencies": {
        "eslint": "^4.4.1"
    },
    "description": ""
}

.babelrc это мой файл babelrc. Я также настроил его этим кодом - /*.babelrc */

{
        "presets": ["es2015", "es2016", "react"]
    }

webpack.config.js это мой js-файл конфигурации webpack. Я также настроил модуль и протестировал его, но он не работает.

/код webconfig.js/

    'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ["css-loader", "sass-loader"],
                publicPath: '/dist',
            },
            {
                test: /\.jsx?$/,
                exclude:  /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }           
        )
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        stats: 'errors-only',
        open: true

    },
    plugins: [new HtmlWebpackPlugin({
        title: 'tripDetailPage',
        hash: true,
        minify: {
            collapseWhitespace: false

        },
        template: './src/index.html'
    }), new ExtractTextPlugin({
        filename: "tripDetail.css",
        disable: false,
        allChunks: true
    })]
}

app.js

const css = require('./app.scss');


    import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render(
       <div>Hello</div>,
     //e('div', null, 'Hello Worlddddd'),
      document.getElementById('root')
    );

ОШИБКА компиляции

ERROR in ./src/app.js
Module parse failed: E:\trip-react\src\app.js Unexpected token (10:3)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|    <div>Hello</div>,
|  //e('div', null, 'Hello Worlddddd'),
|   document.getElementById('root')
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/app.js
webpack: Failed to compile.