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了。有什么问题，欢迎大家一起讨论啦~~。