Javascript 网页包错误可以'；t解析文件或目录（React）

当所有组件都在同一个文件中时，Webpack工作正常。当我试图将每个组件分离到其自己的文件时，我得到一个错误：

'未找到模块：错误：无法解析文件或目录'

我用的是Windows10

文件夹结构：

 reacttest (root)
   node_modules
   public
      components
        GreeterMassage.jsx
        app.jsx
   bundle.js
   index.html
 package.json
 server.js
 webpack.config.js

app.jsx代码：

  const React = require('react');
  const ReactDOM = require('react-dom');
  const GreeterMassage = require('./components/GreeterMassage');

  const GreeterForm = React.createClass({
      onFormSubmit: function(e) {
        e.preventDefault();

        const updates = {}
        const name = this.refs.name.value;
        const massage = this.refs.massage.value;

        if(name.length > 0) {
          this.refs.name.value = '';
          updates.name = name;
        }
        if(massage.length > 0) {
          this.refs.massage.value = '';
          updates.massage = massage;
        }
        this.props.onNewData(updates);
      },
      render: function() {
        return (
          <form onSubmit={this.onFormSubmit}>
            <div>
              <input type="text" ref="name" placeholder="Name"/>
            </div>
            <div>
              <textArea type="text" ref="massage" placeholder="Massage"/>
            </div>
            <div>
              <button>Set</button>
            </div>
          </form>
        );
      }
  });

    const Greeter = React.createClass({
      getDefaultProps: function() {
        return {
          name: 'React',
          massage: 'Default massage'
        };
      },
      getInitialState: function() {
        return {
          name: this.props.name,
          massage: this.props.massage
        };
      },
      handleNewData: function(updates) {
        this.setState(updates);
      },
      render: function() {
        const name = this.state.name;
        const massage = this.state.massage;
        return (
          <div>
            <GreeterMassage name={name}  massage={massage}/>
            <GreeterForm onNewData={this.handleNewData}/>
          </div>
        );
    }
  });

  const firstname = 'My First Name';

  ReactDOM.render(
    <Greeter name={firstname}/>,
    document.getElementById('app')
  );

    const React = require('react');

    const GreeterMassage = React.createClass({
      render: function() {
        const name = this.props.name;
        const massage = this.props.massage;
        return (
          <div>
            <h1>Hello {name}</h1>
            <p>{massage}</p>
          </div>
        );
      }
    });

    module.exports = GreeterMassage;

---

app.jsx

与

GreeterMassage.jsx

位于同一目录中，并且导入与执行导入的文件相关，因此应该是：

const GreeterMassage = require('./GreeterMassage');

---

app.jsx

与

GreeterMassage.jsx

位于同一目录中，并且导入与执行导入的文件相关，因此应该是：

const GreeterMassage = require('./GreeterMassage');

---

哪个版本的网页包？网页包版本1.14.0哪个版本的网页包？网页包版本1.14.0感谢您的回复。刚刚更改了，但仍然出现错误。感谢您的回复。只是更改了它，但仍然会出现错误。