用webpack编译react报错?

用webpack编译react,不知道为什么React会是undefined?

1、webpack.config.js

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

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'Xzqh.js',
        libraryTarget: 'umd',
        library: 'Xzqh'
    },
    externals: {
        'react': 'React'
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    presets: [
                        'react', 'es2015'
                    ]
                }
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!scss-loader'
            }
        ]
    },
    devtool: '#inline-source-map',
    devServer: {
        contentBase: './example',
        hot: true,
        inline: true,
        noInfo: false
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", '.jsx']
    }
};

2、./src/index.jsx

import React from 'react';
console.info('React:', React);    //这里打印出undefined

export default class Xzqh extends React.Component{
    render(){
        return (
            <p>Hello World</p>
        );
    }
}
阅读 3.1k
2 个回答

或许是文件后缀的问题?改为index.js试试

{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }

jsx匹配有问题

test: /.jsx?$/,

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题