Javascript Web包无法分析JSX

我对使用webpack和react很陌生。我已经找到了这类问题的解决方案，但它们似乎不适用于我，因为它通常缺少依赖项或Web包配置文件的格式不正确

mypackage.json

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }

My webpack.config.js

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

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

module.exports = {
  entry: "./src/app/index.js",
  output: {
    filename: 'bundle.js',
    path: DIST_DIR + "/app",
    publicPath:"/app/"
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module:{
    rules:[
        {
            test:/.(js|jsx)$/,
            exclude: /node_modules/,
            include: SRC_DIR +"/app",
            loader: "babel-loader",
            query:{
                presets:["es2015","react","stage-2","react-dom"]
            }
        }
    ]
  }
};

我的index.js

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

class Layout extends React.Component {
    render(){
        return(
            <h1>Work please</h1>
        );
    }
} 

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

从“React”导入React；
从“react dom”导入react dom；
类布局扩展了React.Component{
render（）{
返回(
工作吧
);
}
} 
render（，document.getElementById（'app'））

错误消息

  ERROR in ./src/app/index.js
Module parse failed: Unexpected token (13:6)
You may need an appropriate loader to handle this file type.
| class Layout extends React.Component {
|
| const app =   render(){
|               return(
|                       <h1>Work please</h1>

./src/app/index.js中的

错误
模块分析失败：意外令牌（13:6）
您可能需要适当的加载程序来处理此文件类型。
|类布局扩展了React.Component{
|
|const app=render（）{
|返回(
|工作吧

您的配置要求包含jsx的文件以.jsx扩展名结尾

---

将测试更改为/（js | jsx）$/

您的组件看起来是React类组件（React.component）和无状态功能组件（SFC）的混合体

试着改变这个

class Layout extends React.Component {
    const app = render(){
        return(
            <h1>Work please</h1>
        );
    }
} 
document.getElementById('app');
render(<Layout>,app)

类布局扩展了React.Component{
const app=render（）{
返回(
工作吧
);
}
} 
document.getElementById（'app'）；
渲染（，应用程序）

对于无状态功能组件（SFC）：

。。。
从'react dom'导入{render}；
...
常量应用=（）=>(
工作吧
);
渲染（：

。。。
从'react dom'导入{render}；
...
类布局扩展了React.Component{
render（）{
返回(
工作吧
);
}
} 
;
render（，document.getElementById（'app'））

有关
的更多信息，请尝试将条目更改为./index.js，并将测试更改为/（js | jsx）$/我已尝试将测试更改为/（js | jsx）$/，这似乎没有什么区别啊，是的，一定是在我试图找出问题所在并最终混淆了各种组件时发生的。对此表示抱歉。它似乎仍然无法解决问题。是否有
import{render}来自“react dom”；
？错误消息是否相同？我只是错过了这个。谢谢！
...
import { render } from 'react-dom';
...
const App = () => (
  <h1>Work please</h1>
);

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

...
import { render } from 'react-dom';
...
class Layout extends React.Component {
    render(){
        return(
            <h1>Work please</h1>
        );
    }
} 
;
render(<Layout />, document.getElementById('app'))