(webpack篇)6.配置React开发

说明：通过babel配置react开发语法
本系列都是连贯的，有些配置前面介绍过。

一、安装

npm install react react-dom --save
npm install --save-dev @babel/preset-react

二、配置

• 1.说明 这里我们将webpack.config.js中关于babel-loader配置新建了babel的配置文件。

• 2.新建.babelrc 在项目根目录下创建，添加内容

{
    "presets": [
        [
            "@babel/preset-env", {
                "targets": {
                    "chrome": "67"
                },
                "useBuiltIns": "usage"
            }
        ],
        "@babel/preset-react"
    ]
}

• 3.修改webpack.config.js中内容

...
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: "babel-loader"  // 配置挪出去了
        }
        ...
        ]
    },
    ...
}

三、测试React代码

• 1.代码 项目中src/index

import React, { Component } from 'react';
import ReactDom from 'react-dom'

class App extends Component {
    render() {
        return <div>Hello World</div>
    }
}

ReactDom.render(<App />, document.getElementById('root'));

• 2.效果展示 npm run serve 启动