使用webpack/babel构建react开发环境（最新版）

1.下载依赖包

npm install webpack webpack-cli -D
npm install webpack-dev-server -D

• webpack.config.js

let htmlWebpackPlugin = require('html-webpack-plugin')
let path = require('path')
let htmlWP = new htmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
module.exports={
    mode:'development',
    plugins:[
        htmlWP
    ],
    module:{//所有第三方包匹配规则
        rules:[
            {test:/\.js|jsx$/,use:'babel-loader',exclude:'/node_modules/'}//排除项
        ]
    }
}

• 打包编译react语法，需要下的包

//这是我的index.js
let React = require('react')//创建虚拟dom
let ReactDom = require('react-dom')//将虚拟dom放到页面中
const htdiv = <div id="my">今天天气不好</div>
ReactDom.render(htdiv,document.getElementById('app'))

npm install @babel/plugin-transform-runtime
npm install @babel/preset-env
npm install @babel/preset-react
npm install @babel/core
npm install babel-loader
npm install html-webpack-plugin -D//打包html页面，需要new一个对象

• 这是.babelrc切记点不能忘

{
    "presets": ["@babel/preset-env","@babel/react"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

如有错误，请联系更正哦