1 引入
- jsx: javascript+xml
- react中样式结构行为都是用js编写的,由于在js中直接编写html代码会报错
- 出现了jsx,需要用babel来转换
- babel会将js中的结构代码解析成html代码,然后渲染到页面
- 说明:webpack引入依赖时,会因为版本问题出现很多的坑
2 babel下载与配置
cnpm i babel-core babel-loader babel-plugin-transform-runtime
cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react
配置文件
{
"plugins": ["transform-runtime"],
"presets": ["env","stage-0","react"]
}
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const html = new HtmlWebpackPlugin({
template: path.join( __dirname, './src/index.html' ),
filename:'index.html'
})
module.exports = {
mode: "development",
plugins:[
html
],
module:{
rules:[
{test:/.\js|jsx$/,use:'babel-loader',exclude:/node_modules/}
]
}
}