Webpack构建React环境

目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目

接下来，我们用 webpack 构架一个React项目的环境

安装

xxxxxxxxxx
npm install -D @babel/preset-react@7.17.12
npm install -S react@18.2.0
npm install -S react-dom@18.2.0

增加配置文件

React使用的语法为jsx语法，所以我们需要配置jsx的解析模块

xxxxxxxxxx
{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
}

同时我们需要修改babel.config.js文件

xxxxxxxxxx
module.exports = {
    presets: [
        '@babel/preset-env',
        "@babel/preset-react"
    ]
}

编写React代码

xxxxxxxxxx
import React from 'react'
import ReactDom from 'react-dom'

class App extends React.Component {
    render(){
        return (
            <div style={{color:"#333"}}>
                Hello
            </div>
        )
    }
}
ReactDom.render(<App/>,document.getElementById("root"))