React 热更新

用 Babel 编译 React 组件，使用的 preset 是@babel/preset-react。要实现 React 组件的热更新，需要用到 @pmmmwh/react-refresh-webpack-plugin、react-refresh。

yarn add react react-dom @babel/preset-react  @pmmmwh/react-refresh-webpack-plugin  react-refresh --dev

// React 组件 App.jsx
import React, { Component } from "react"
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            title: "前端11",
        }
    }
    render() {
        return (
            <div>
                <h2>{this.state.title}</h2>
            </div>
        )
    }
}
export default App

// 入口文件
import React from 'react'
import  ReactDOM  from 'react-dom'
import App from './App.jsx'
if (module.hot) {
  module.hot.accept([], () => {
  })
}
ReactDOM.render(<App />, document.getElementById('app'))

js 和 jsx 的 loader 可以统一写成：

{
  test: /\.jsx?$/,
    exclude: /node_modules/,
      use: ['babel-loader']
}

Babel配置文件：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env'],
    ['@babel/preset-react'],
  ],
  plugins: [
    ['react-refresh/babel']
  ]
}