Reactjs 未找到模块：错误：Can'；t解析'/组件/Hello'；

我试图导入一个简单的组件，但网页似乎找不到它。路线很好，网页配置中的“解决方案”也很好，因此我不明白问题出在哪里。 请看一下。 顺便说一下，这是一个航行/反应环境

./assets/src/component/Hello.jsx 6:12中出错 模块分析失败：意外令牌（6:12） 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件

Hello.jsx：

import React from 'react'

class Hello extends React.Component {
    render() {
        return(
            <div> // Err supposed to be here (line6)
                Hello World!
            </div>
        )
    }
}

export default Hello;

网页包配置文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    entry: './assets/src/index.js'
  },
  output: {
    path: __dirname + '/.tmp/public',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'assets/src/index.html'
    })
  ]
};

结构如下：

-src
--component
----Hello.jsx
--index.js
--index.html

---

您可以尝试将扩展名更改为Hello.js或将bable loader test更改为

---

test://\（js|jsx）$/，

它不知怎么起作用了。。但是希望使用.jsx扩展名tho@mialnikaIt双管齐下！非常感谢。但是我不明白。我的意思是，webpack的“解析”和“测试”不一样吗？很好：）根据你的问题，不是真的-解析只告诉你模块是如何解析的，但在测试中你定义了哪个模块应该处理它。明白了。再次感谢你！没问题：）祝你今天愉快！

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    entry: './assets/src/index.js'
  },
  output: {
    path: __dirname + '/.tmp/public',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'assets/src/index.html'
    })
  ]
};

-src
--component
----Hello.jsx
--index.js
--index.html