我的 REACTJS 应用程序具有以下目录结构

/ReactJs
-dist
--app
-node_modules
-src
--app
--app/Hello.jsx
----components
----components/PropTest1.jsx
-src/main.html 
package.json 
webpack.config.js

我的 Hello.jsx 代码是：

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';

import PropTest1  from "./components/PropTest1"



var dest = document.querySelector('#container');

class Hello extends Component {
    render() {
        return (
        <div>
        <h1>Hello World</h1>
        <PropTest1 />
        </div>

        );

    }

}

render(<div><Hello /></div>, dest); 

和 PropTest1.jsx 代码是

import React, { Component } from 'react';



class PropTest1 extends Component {
    render() {
        return (
            <div>
              <p>  My name is no one</p>
            </div>
        );
    }
}

export default PropTest1;

我的 webpack.config.js 是

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

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, 'src') + "/app/Hello.jsx",
  output: {
    path: path.resolve(__dirname, 'dist') + "/app",
    filename: 'bundle.js',
    publicPath: '/app/'
  },
  module: {
          rules: [{
            test: /\.jsx?/,
            include: path.resolve(__dirname,'src'),  
            loader:'babel-loader'
          }]
  },
  resolve: {
    extensions: ['*', '.js', '*.jsx']
}
};

当我在做

npm 运行构建

我 发现找不到module：错误：无法解析“./components/PropTest1”

上面的项目有什么问题，请检查。

编辑：我在 webpack.config.js 中添加了解析配置