Part 4 - Support React jsx and class_jsx support-优快云博客

本文链接：https://blog.youkuaiyun.com/ljm_lijingming/article/details/123681767

本文指导如何配置Webpack以支持React JSX和class语法。主要步骤包括：修改webpack.config.js，安装core-js，创建jsx组件PageA，并在Main.js中引入组件。最后通过npm run dev预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Step 1

首先，我们需要修改webpack.config.js,修改如下：

... 
module:{
        rules:[//webpack package rules
            {
                test:/\.(js|jsx)$/,//当webpack 打包用到的是JS|jsx文件时，就用babel-loader来编译
                exclude:/node_modules/,//排除node_modules文件里的js
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.(css|scss)$/,//当webpack碰到的是.sass、.css文件，就用style-loader、cssloader来编译
                exclude:/node_modules/,
                use:['style-loader','css-loader',"sass-loader"]
            }
        ]
    },
    resolve:{
        modules:['node_modules'],
        extensions:['.js','.jsx','.json'],//当我们在文件中import js 或者 jsx 文件时，添加这个配置可以不写.js.jsx后缀名
        alias:{
            '@':path.resolve('src')//用@符号代表src目录,在vue里面经常这么干
        }
    },
...

Step 2

npm i core-js --save-dev，安装core-js支持jsx和class编程。

Step 3

在js folder 中创建组件PageA.jsx文件，代码如下：

import React from "react";
export default class PageA extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <>
                <span>PageA - Component</span>
            </>
        )
    }
}

修改Main.js的代码，如下：

import React from 'react'

import PageA from '@/js/PageA'

import '../css/Main.css'
import '../css/Main.scss'

const Main =()=>{
    return ( 
        <>
            <h1 className='color-red'>
                reactapp(by css)
                <br/>
                <span>span-color(by sass)</span>
            </h1>
            <PageA></PageA>
        </>
        
    )
}
export default Main

在Main.js中，我们引入了组件PageA。