react-hot-loader3的配置说明

近期项目中使用的react-hot-loader版本为v3,其配置方式和v1版本有比较大的区别,其配置的过程可参考官网配置,下面是按照官网的步骤操作的:

  • 首先你需要为你的项目安装上这个小可爱

    npm install --save-dev react-hot-loader
  • 在.babelrc(babel的配置文件)加上

    {
            plugins: ["react-hot-loader/babel"]
        }
  • 确保项目开启了webpack-dev-server的HMR
    (这里说明一下:因为react-hot-loader的热更新是依赖于webpack-dev-server,后者是在打包文件改变时更新打包文件或者reload刷新整个页面,而前者会根据stateNode节点的更新对比,只更新改变的reactDom节点,从而保留了未改变的state值,更适用于react的开发更新模式,感兴趣的可以看看你源码了解一下原理)。
  • (如果项目中已经配置了webpack的热更新,可以略过看下一步?)项目的wepack-dev-server采用inline方式配置的:

    • 安装webpack-dev-server
    • 启东时采用inline方式,通过npm命令开启项目

      webpack-dev-server --config config/        webpack.dev.config.js --inline --progress --colors --host 127.0.0.1 --port 8081
    • 在webpack配置devServer的相应参数,允许热更新:

      devServer: {
              ... ,
              hot: true,
              ...,
          }
    • plugins中加入HotModuleReplacementPlugin:

      plugins: [ new webpack.HotModuleReplacementPlugin(),...]
  • 在开发模式的webpack文件入口参数entry添加react-hot-loader/patch:

    module.exports = {
        entry: [
          'babel-polyfill',
          'react-hot-loader/patch',
          './main.js'
        ]
      }
  • 入口文件(比如main.js中)引入react-hot-loader中的AppContainer组件,这个组件下的所有子组件都会在发生变化时,触发热更新,配置的代码如下(注意,这个组件下的子组件只能有唯一的一个?):

    import React from 'react';
      import { render } from 'react-dom';
      import { AppContainer } from 'react-hot-loader';
      import Upload from './components/Upload';
      
      
      const renderCom = App => {
        render(
          <AppContainer>
            <App />
          </AppContainer>,
          document.getElementById('app')
        );
      }
      
      renderCom(Upload);
      
      if (module.hot) {
        module.hot.accept(
            './components/Upload',() => { 
                 const nextUpload = require('./components/Upload').default; // eslint-disable-line global-require
                 renderCom(nextUpload); 
            }
        )
      }

好了,通过这些步骤,一路下来,就可以顺利的开启react-hot-loader了。有什么问题,欢迎大家一起讨论啦~~。

相关推荐