react.js - 用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>
        );
    }
}

解决方案

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

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

这篇关于react.js - 用webpack编译react报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！