Javascript Webpack@4.41与巴贝尔-loader@8生成react脚本时出错（模块分析失败：意外令牌）

我正在努力实施webpack@4.41巴贝尔呢-loader@8处理react脚本。我在绑定jsx语法（webpack babel loader）时遇到问题，遇到任何html标记时出错退出

我使用命令：

npm run build

（webpack——生产模式）

index.js

// Import the wrapper component, and the the creator function
import React  from 'react';
import ReactDOM from 'react-dom';


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

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

package.json

  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.8.6",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2"
  }
}

    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",

我尝试将index.js文件与

@babel/cli

捆绑在一起，这似乎很有效（command

npx babel--presets@babel/preset env，@babel/preset react

）。我已经尝试解决这个问题太久了，非常感谢您的帮助

更新

---

webpack.config.js

有一个尾随空格，因此webpack无法识别它。

您可以检查我的配置

我的网页包

{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "eslint-loader"]
},

.LRC文件

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-runtime"
    ]
}

package.json

  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.8.6",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2"
  }
}

    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",

更新：

---

请确保将“^6.8.0”安装到devdependences部分的package.json中，谢谢您的回答。我尝试将网页包规则更新为：使用：[“babel loader”，“eslint loader]”，安装“@babel/plugin提案类属性”：“^7.8.3”，“@babel/plugin转换运行时”：“^7.8.3”，“eslint loader”：“^3.0.3”，并编辑。babelrc为：{“预设”：[“@babel/preset env”，“@babel/preset react”]，“plugins:[“@babel/plugin Proposition class properties”，“@babel/plugin transform runtime”]}错误持续存在，很遗憾……你能在github上分享你的完整代码吗？我会看一看这里是前端应用程序，我可以毫无问题地构建你的代码。再次检查我的答案。