React开发中的HMR（热替换）配置

开发中无论是样式还是js修改，我们都希望局部更新以节约编译时间，也即HMR，其中css样式的HMR，style-loader已经内置实现，js的HMR则需要插件ReactRefreshWebpackPlugin：

1. Css HMR，在webpack的配置文件中，处理css的loader直接配置：

module.exports = {
    entry: "./src/main.js",
    output: {
    },
    module: {
        rules: [
            //处理css
            {
                test: /\.css$/,
                use: "style-loader", // 会实现css的HMR
                     "css-loader",
            },
};

2. js的HMR

1）首先需要在dev server中开启

module.exports = {
    devServer: {
        host: "localhost",
        port: XXXX,
        open: true, //自动打开浏览器
        hot: true, //开启热模块替换
    },
}

2）安装react-refresh插件：

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh，

实际安装过程中，会因为该插件的peerDependencies中的"webpack-dev-server": "3.x || 4.x",跟已经安装的最新版本的webpack-dev-server的5.0以上的版本产生冲突，个人的解决方案是：安装插件时使用--force参数，但是有一定概率后续别的插件安装后还是会报错，重复安装了几次

3）webpack配置文件中声明、初始化插件

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');


module.exports = {

    plugins: [
        //React的js HMR插件
        new ReactRefreshWebpackPlugin(),
    ],

}