配置babel启用jsx语法

html是最优秀的标记语言，使用js对象来创建虚拟DOM对象太麻烦了，最好就能使用html语法来写虚拟DOM

这种混合写在js中的html标签，叫做JSX，但是webpack无法打包除了js之外的语言，所以在编译时，会将这种html标签转换为js对象，这就需要使用babel来将html标签转换为js对象

1.安装babel插件

安装两套包
第一套包（工具包）

npm install babel-core babel-loader babel-plugin-transform-runtime -D

第二套包（语法包）

npm install babel-preset-env babel-preset-stage-0 babel-preset-react -D

2.配置webpack.config.js

babel-loader@7.1.5
module.exports={
module:{ 
 rules:[{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}]
}
}

3.配置.babelrc

位置：项目根目录

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

配置完成后，就可以直接在js文件中，用一个对象来接收html标签组成的对象了