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了。有什麼問題，歡迎你們一塊兒討論啦~~。