准备工作
安装webpack => 编译打包ES6语法
webpack基于nodejs，电脑上得有node
这里安装的是webpack 4.x，因此还得安装webpack-cli。因为webpack 4.x
中的打包命令被分离进webpack-cli中。
执行 npm i –D webpack webpack-cli webpack-dev-server
安装webpack插件
执行 npm i –D html-webpack-plugin
安装babel及其相关插件
执行 npm i –D babel-core babel-loader babel-plugin-transform-runtime
执行 npm i –D babel-preset-env babel-preset-react babel-preset-stage-0
babel-plugin-transform-runtime作用：抽离运行时重复的函数作为模块复用
babel-preset-react 作用：将js中JSX内容转换成react相关的语法
注意：babel-core和babel-loader版本得对应
webpack.config.js的配置
webpack 4.x => 约定大于配置 （无需配置入口文件和出口文件）
入口文件默认找src目录下的index.js 出口文件默认在dist目录下的main.js
这里的mode属性必须配置，否则会报错 => webpack 4.x新增属性
.babelrc的配置
这里的参数同样可以配置进webpack.config.js中
loader-options //单个loader时可以像上面那样写
有多个loader时要用use属性
use支持字符串，支持数组，支持对象, 支持对象数组
use: ‘babel-loader’
use: [‘style-loader’,’css-loader’]
use: {
loader: ‘babel-loader’,
options: {
presets: ["env","stage-0","react"],
plugins: ["transform-runtime"]
}
}
use: [{
loader: ‘babel-loader’,
options: {
presets: ["env","stage-0","react"],
plugins: ["transform-runtime"]
}
},{
loader: ‘url-loader’
options:{
limit:8192
}
}]
安装react
执行 npm i –S react react-dom
reactjs的使用
react原生api创建DOM渲染页面
模块导入
创建虚拟DOM
使用虚拟DOM渲染页面
html作用域
注意：这里两个参数都是DOM对象
JSX语法糖 => 模版语言创建模版对象（DOM对象）
原因：直接用reactjs创建DOM的api来写代码太麻烦了
前提准备：需要安装并配置babel相关loader和插件来解析JSX （前面已经配置好了）
babel-preset-react 作用：将js中JSX内容转换成reactjs相关的语法
==> 其实就是将JSX模版对象转成reactjs的api创建的DOM对象
核心 =>｛｝中写js表达式
a 数据的定义
b 模版对象的定义
c 使用模版渲染页面
结果：
