Webpack Error无法解析文件或目录（React）

Question

Webpack works OK when all components are in the same file. When I try to separate each component to his own file I get an error:

'module not found: error: cannot resolve file or directory'.

I'm using windows 10.

folder structure:

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

app.jsx code:

  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')
  );

GreeterMassage.jsx code:

    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;

webpack.config.js

    module.exports = {
      entry: './public/app.jsx',
      output: {
        path: __dirname,
        filename: './public/bundle.js'
      },
      resolve: {
        extesions: ['', '.js', '.jsx']
      },
      module: {
        loaders: [
          {
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015']
            },
            test: /\.jsx?$/,
            exclude: /(node_modules | bower_components)/
          }
        ]
      }
    };

Answer 1

app.jsx是在同一个目录中GreeterMassage.jsx ，进口是相对于文件做进口，所以它应该是：

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