react項目自行配置熱更新的實現(xiàn)

更新時間：2023年11月27日 09:54:13 作者：程序員超超

本文主要介紹了react項目自行配置熱更新的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

react項目自己配置熱更新的話需要安裝兩個包@pmmmwh/react-refresh-webpack-plugin和react-refresh，這個是官方推薦的做法。下面給出一個完整demo

App.js

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1 onClick={() => setCount(count + 1)}>{count}</h1>
      <div>1</div>
    </div>
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

index.js

import React from "react";
import App from "./App";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("app"));

root.render(<App></App>);

webpack.config.js

const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  mode: "development",
  devServer: {
    static: "./dist",
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env", "@babel/preset-react"],
          plugins: [require.resolve("react-refresh/babel")], // react-refresh 添加
        },
      },
    ],
  },
  plugins: [
    new ReactRefreshPlugin(),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

package.json

{
  "name": "react-hmr",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "@babel/core": "^7.23.3",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.5.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.14.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

之后執(zhí)行npm start，大家自行測試

這里說一下注意點，每個組件只能使用一個export，如果有多個，熱更新會失效，這點很重要。例如我們修改App.js

App.js

import React, { useState } from "react";

export const delay = () => {}

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1 onClick={() => setCount(count + 1)}>{count}</h1>
      <div>1</div>
    </div>
  );
}

export default App;

這里多加了一個export const delay，大家可以試一下。這個時候熱更新就不起作用了。

這里還解釋一下為什么不用webpack的hmr，webpack不是自帶hmr么，為什么還安裝其他的包呢？這個問題大家可以看一下我這篇文章

還有一種方式是使用react-hot-loader，不過react-hot-loader已經(jīng)不推薦使用了。

我們這里基于上面的代碼進行改編，這里react和react-dom需要降級，把18版本降級成17版本。不然無法使用。先執(zhí)行

npm i react@17.0.0 react-dom@17.0.0
npm i react-hot-loader

修改webpack.config.js配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  mode: "development",
  devServer: {
    static: "./dist",
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env", "@babel/preset-react"],
          plugins: ["react-hot-loader/babel"],
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

修改index.js

import { hot } from "react-hot-loader/root";
import React from "react";
import App from "./App";
import { render } from "react-dom";

const HotComponent = hot(App);

render(<HotComponent />, document.getElementById("app"));

if (module.hot) {
  module.hot.accept("./App", () => {
    render(<HotComponent />, document.getElementById("app"));
  });
}

到此這篇關(guān)于react項目自行配置熱更新的實現(xiàn)的文章就介紹到這了,更多相關(guān)react自行配置熱更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: