基于webpack4.x的配置
react 是加载组件生命周期
react-dom是把虚拟dom渲染出界面
安装webpack-dev-server 热更新
在package.json中配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open 可以加浏览器 --port 3000 --hot --host 127.0.0.1 "
  },

cnpm i babel-core babel-loader 预编译
babel-plugin-transform-runtime -D插件
预编译配置到
module：{rules：【{test："/正则匹配/",use:“编译器器”,exclude:""}】}，
插件plugins：【】
根目录webpack.config.js的文件里面

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
const htmlplugin=new HtmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源头文件
    filename:"index.html"//生成首页的文件名称
})
module.exports={//webpack基于node构建的
    mode:"development",
    //production生产模式 提供了约定大于配置 约定打包文件是src/index ->dist/main
     moudle:{
           rules:[
                这是预编译器 预编译器需要安装 babel-loader
      { test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
                ]
          }
            plugins:[
              这是插件 插件需要安装导入webpack基于nodejs
  nodejs基于ChromeV8引擎所以采用require与exports或module.exports es6的export default用不了
              htmlplugin
            ]
    
}

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D语法

在根目录下面建立.babelrc的文件 json格式
preset是语法 plugins是插件
不能包含单引号与注释，

{
    "presets": ["env","stage-0","react"],
    "plugins": ["transform-runtime"]
}

如果报错

babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

请按照上面提示安装babel-loader@7

总结
虚拟dom是用js对象的形式来表现DOM与DOM之间的嵌套
通过webpack加载src index打包成main.js在内存里面
用html-webpack-plugin把index.html打包在内存里面
template源文件位置 filename输出首页文件名称