新手一枚，在 学习 ReactJs 中，使用 webpack 配置 resolve.alias 出现一些问题。 我的 webpack 配置如下：

var path = require('path');

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

项目文件目录如下：

app     
  /public   
   app.jsx        
   /components    
      GreeterMessage.jsx 
      GreeterForm.jsx    
      Greeter.jsx

为什么我在 app.jsx 中 使用import Greeter from 'Greeter';, 在 Greeter.jsx 中使用 import GreeterMessage from 'GreeterMessage'; import GreeterForm from 'GreeterForm'; 会出现引用问题呢。出现 bundle.js:303 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method ofGreeter.(…)

但直接使用 require（‘./components/Greeter’）这种方式程序能够正确运行。