从“React”导入React时获取“Uncaught SyntaxError:意外标识符”

我是新来的。当我尝试运行一个简单的react应用程序时,它显示了一个错误“Uncaught SyntaxError:意外标识符”。

我的包裹。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"
  }

和配置。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;

指数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"));

我以前问过这个问题,我尝试了所有建议的方法,但仍然出现了这个错误。请帮我解决这个问题。