安装（没有涉及HMR）

  1. 在处理js代码的基础上安装如下npm 包
  2. yarn add --dev @babel/preset-react // 开发环境
  3. yarn add react react-dom // 生产环境

建 jsx 文件

import React, {useState} from 'react';

const App = () =>{
    const [count,setcount] = useState(0)
    return <>
    <h1>{count}</h1>
    <button onClick={() =>setcount(v =>v + 1)}>click +1</button>
    </>
}

export default App;

导入入口文件

import './tools'
import App from './App.jsx';
import React from 'react';
import ReactDom from 'react-dom';

if(module.hot){
    module.hot.accept(['./tools.js'], () =>{
        console.log('is change ');
    })
}

ReactDom.render(<App />, document.getElementById('root')); // 挂载root根目录

配置jsx 的 babel-loader 及 .babelrc文件

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    ["@babel/preset-react"]
  ]
}
// -----------------------------------------------
// webpack module loader
 rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: "babel-loader",
        },
      },
    ],

安装（HMR实现react局部热更新）

重点

目前已知 target 必须配置为 web 即 target: 'web'，配置为 browserslist 不可以

yarn add —dev react-refresh @pmmmwh/react-refresh-webpack-plugin

@pmmmwh/react-refresh-webpack-plugin 是 webpack配置内的 插件 作用是 ： 起到 过渡和结合 的作用 react-refresh 是babel-loader 插件 HMR实现的核心 插件

image.png
image.png

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    ["@babel/preset-react"]
  ],
  "plugins": ["react-refresh/babel"] // 这里
}

额外

对于 普通的js 文件 不带 jsx 语法的文件 用
if(module.hot){
module.hot.accept([‘./tools.js’], () =>{
console.log(‘is change ‘);
})
}

对于 jsx 文件 用
image.png