Question

今天我正在设置我的第一个Webpack Bebel React项目，我在这里遇到了一些奇怪的情况。我不知道为什么，但我所做的每一个组件都没有被React识别。我可以直接在检查器中看到它，似乎它没有被编译。所有标准HTML元素都将被渲染。甚至不调用我创建的组件的构造函数内部的console.log。我用webpack -p

运行Hot模式

这是我的Webpack配置：

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const isProduction = process.env.NODE_ENV === 'production'
const cssDeveloperLoaders = ['style-loader', 'css-loader', 'sass-loader']
const cssProduction = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
})

const cssConfig = isProduction ? cssProduction : cssDeveloperLoaders

module.exports = {
    entry: {
        app: './src/app.jsx'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.jsx$/,
                exclude: path.resolve(__dirname + '/node_modules/'),
                use: 'babel-loader',
                query: {
                    presents: ['es2015','react']
                }
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        open: true,
        openPage: ''                    //Fix to webpack version 3.0.0 after removing redirection to /undefined
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'app.css',
            disable: !isProduction,     //So if production is running it will generate file otherwise not
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
}

我的.bablerc

{
    "presets": [
        "es2015",
        "react"
    ]
}

App.jsx：

import './app.scss'

import React from 'react';
import { render } from 'react-dom';


import engine from './engine.jsx'


render(
    <engine/>,
    document.getElementById('root')
);

engine.jsx

import React from 'react';


class engine extends React.Component{
    constructor(){
        super();
        console.log('Component has been constructed ')
    }
    render(){
        return(
            <div>xD</div>
        )
    }
}
export default engine;

React Chrome扩展程序的图片。

请注意，未调用console.log。

我的html是空的，我只看到引擎元素（未编译。）

有关此问题的任何建议吗？

HTML：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="app.bundle.js"></script>
</body>
</html>

Answer 1

在您的webpack配置文件中添加

解决：{ 扩展：[＆＃34; .js＆＃34;，＆＃34; .jsx＆＃34;] }

因此您不需要使用扩展名导入jsx文件。

类名应以大写字母开头，否则不会调用react组件中的方法，也不会抛出任何错误。

engine.jsx

    class Engine extends React.Component{
        constructor(){
            super();
            console.log('Component has been constructed ')
        }
        render(){
            return(
                <div>xD</div>
            )
        }
    }

export default Engine;

App.jsx

import Engine from './engine'
render(
    <Engine/>,
    document.getElementById('root')
);

请验证https://codesandbox.io/s/D9rpvWWG6 您也可以参考https://github.com/facebook/react/issues/4695

React不渲染新的组件，新的webpack设置

1 个答案: