react+webpack热更新、保存react状态

1、先搭建一个webpack+react的项目。

2、webpack.config.js中配置

module.exports = {
  //...
  devServer: {
    hot: true
  }
};

module.exports = {
  //...
    plugins: [
        //..
        new webpack.HotModuleReplacementPlugin()
    ],
};

3、index.tsx中配置,我用的是typesctipt，不然的话就是index.js，也就是项目入口的js文件

 let _module = module as any;//如果是js，这一行不需要
 if (_module.hot) {
   _module.hot.accept(() => {
     ReactDOM.render(<App />, document.querySelector("#app"));
   });
 }

ReactDOM.render(<App />, document.querySelector("#app"));

然后运行webpack-dev-sever就可以实现热更新，不过这样做不能保存react的状态，比如react经典的计数器。改变ui后，计数器会归零，这时候需要react-hot-loader来实现保存状态的功能。

4、安装依赖

npm install react-hot-loader @hot-loader/react-dom

5、在webpack.config.js中增加"react-hot-loader/babel"的配置

   module: {
//...
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ["react-hot-loader/babel"] //增加
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.ts(x?)$/,
                use: [
                    {
                        loader: "awesome-typescript-loader",
                        options: {
                            useCache: true,
                            cacheDirectory: path.join(__dirname, './../', ".cache-loader"),
                            babelOption: {
                                babelrc: false,
                                plugins: ["react-hot-loader/babel"] //增加
                            }
                        }
                    }
                ]
            }
        ]
    },

6、在APP.js中

import { hot } from "react-hot-loader/root";

//.....

export default hot(App);

确保react-hot-loader在react和react-dom之前引入

然后重新运行webpack-dev-server就可以实现带状态的热更新

7、参考：

https://webpack.docschina.org/plugins/hot-module-replacement-plugin/

https://github.com/gaearon/react-hot-loader