为什么此react-hot-loader无法正常工作，当我调用规则时，我会收到关于Loader的错误消息

如何解决为什么此react-hot-loader无法正常工作，当我调用规则时，我会收到关于Loader的错误消息

我遵循了这个how-to-add-hot-module-reloading-to-a-react-app，但收到错误消息。

我知道这很容易，因为我是新手。而且大多数教程都太过时了，因此很难找到一致的东西来学习

我认为Webpack服务器正常，可以正常启动 请咨询：

ERROR in ./src/index.js 5:16
Module parse Failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from "./App";
|
> ReactDOM.render(<App />,document.getElementById("root"));

这是webpack.config.js

const webpack = require('webpack');
const port = process.env.PORT || 3000;

module.exports = {
  entry: './src/index.js',module: {
    rules: [
      {
        test: /\.(js|jsx)$/,exclude: /node_modules/,use: ['babel-loader']
      }
    ],rules: [
      {
        test: /\.json$/,loader: 'json-loader'
      }
    ],},resolve: {
    extensions: ['*','.js','.jsx']
  },output: {
    path: __dirname + '/dist',publicPath: '/',filename: 'bundle.js'
  },plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],devServer: {
    contentBase: './dist',hot: true
  },devServer: {
    host: 'localhost',port: port,historyApiFallback: true,open: true
  }
};

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />,document.getElementById("root"));

更新 添加App.js

import React,{ Component } from "react";
import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import Resume from "./resume.json";
import { hot } from 'react-hot-loader/root'
class App extends Component {
  componentDidMount() {
    document.title = [
      Resume.basics.name,Resume.basics.label,[Resume.basics.location.region,Resume.basics.location.country].join(",")
    ].join(" | ");
  }

  render() {
    return (
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
    );
  }
}
export default hot(App)

现在也出现此错误。babelrc无法找到架构：