从“反应”导入React时获取“未捕获的SyntaxError：意外的标识符”

Question

我在React JS中是个新手。当我尝试运行一个简单的React应用程序时，它显示了一个错误“未捕获的SyntaxError：意外的标识符”。

我的package.json就是这样

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }

而config.js是

var DIST_DIR=path.resolve(__dirname,"dist");
var SRC_DIR=path.resolve(__dirname,"src");

var config= {
    entry:
        SRC_DIR + "/app/index.js",
    mode:"development",
    output: {
        path: DIST_DIR + "bundle.js",
        publicPath: "/app/"
    },
    module:{
        rules:[
            {
                test:/\.js?/,
                include:SRC_DIR,
                loader:"babel-loader",
                query:{
                    presets:["es2015","es2016","env","react","stage-2"]
                }
            }
        ]
    }
};


module.exports=config;

index.js就像

import React from "react";
import {render} from "react-dom";

class App extends  React.Component{
    render(){
        return (
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}

render(<div>
    <h1>Hello</h1>
</div>,window.document.getElementById("apps"));

此问题之前曾提出过，我尝试了所有建议的方法，但仍然收到此错误。请帮助我解决问题。