react的基本配置

cnpm i react react-dom -S

安装babel解析jsx

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

cnpm i babel-preset-react -D
添加配置代码 .babelrc

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

webpack默认只管理js 配置要助力的jsx

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html'),
    filename: 'index.html'
})

module.exports = {
    mode: "development",
    plugins: [
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/
            }
        ]
    }
}

babel 版本问题

cnpm install -D babel-loader@7 babel-core babel-preset-env
回退版本