React Webpack Alias 问题求助

ruomu · 2017年02月11日 · 最后由 meibin 回复于 2017年06月12日 · 6742 次阅读

新手一枚,在 学习 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’)这种方式程序能够正确运行。

只用过配置一个短路径 alias: { src : __dirname + '/src', } 这样的,然后 import Main from "scr/../main"; 应该跟你的用法没什么区别,不知道是不是在编译的时候少了些什么, 业余时间 写了些 demo,有兴趣可以看一下,看能否起到参考作用: 地址:https://github.com/meibin08 如果对你有帮助,记得 star 哦,谢谢!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号