您可能需要适当的加载器来处理此文件类型-React和Webpack

Question

即使我已经添加了babel加载器，无论它只是不读取JSX语法。请任何帮助将不胜感激！我已经在present-env和预设反应上都运行过npm install。

Webpack.config.js

我将Spring文档给定的webpack配置与react一起使用，如下所示。

var path = require('path');
module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
      },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                        plugins: ["@babel/plugin-proposal-class-properties"]
                    }
                }]
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
              }
        ]
    }
};

Home.jsx

import React, { Component } from "react";
import NavBar from "./navbar";
import Product from "./product";
import css from "./product.css";

const divStyle = {
  display: "flex",
  flexWrap: "wrap",
  flexDirection: "row",
  justifyContent: "flex-start",
  overFlow: "auto",
  whiteSpace: "nowrap"
};

const horizontalScroll = {
  display: "inline-block"
};
class Home extends Component {
  render() {
    return (
      <div style={divStyle}>
        {this.props.products.map(product => (
          <Product
            key={product.id}
            onDelete={this.props.onDelete}
            product={product}
            onIncrement={this.props.onIncrement}
          />
        ))}
      </div>
    );
  }
}

export default Home;

错误：

[INFO] ERROR in ./src/main/js/app.js
[INFO] Module not found: Error: Can't resolve 'src/main/resources/templates/index.html' in 'E:\alpha\src\main\js'
[INFO]  @ ./src/main/js/app.js 42:12-62
[INFO] 
[INFO] ERROR in /alpha/src/main/js/home.jsx 21:6
[INFO] Module parse failed: Unexpected token (21:6)
[INFO] You may need an appropriate loader to handle this file type.
[INFO] |   render() {
[INFO] |     return (
[INFO] >       <div style={divStyle}>
[INFO] |         {this.props.products.map(product => (
[INFO] |           <Product
[INFO]  @ ./src/main/js/app.js 40:11-49
[INFO] 
[INFO] ERROR in /alpha/src/main/js/navbar.jsx 5:8
[INFO] Module parse failed: Unexpected token (5:8)
[INFO] You may need an appropriate loader to handle this file type.
[INFO] | 
[INFO] | class NavBar extends Component {
[INFO] >   state = {
[INFO] |     cartItems: 0,
[INFO] |     notifications: 0,
[INFO]  @ ./src/main/js/app.js 38:13-53

该错误表明它不能专门读取JSX。我已经有了babel-loader。我不确定自己还应该做什么。预先感谢。