webpack学习（六）：结合React配置热替换

react-hot-loader

what？

react 提供了 react-hot-loader 插件来帮助 webpack 配置下 react 实现热替换

use？

命令行运行以下命令进行安装：

npm install react-hot-loader --save-dev

创建.babelrc并进行如下配置：（或者也可以在webpack配置文件中配置，提取到该文件只是为了降低webpack配置文件代码量，便于阅读）

{
    "presets": ["env", "react", "stage-2"],
    "plugins": ["react-hot-loader/babel"]
}

修改组件文件源代码，如：

import React from 'react';
import Tip from '../../commons/components/tip/tip.js';
import {hot} from 'react-hot-loader';  

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello,this is page1!</h1>
            <hr/>
            <div className='app'>
               这里是测试页面One！<Tip />
            </div>       
         </div>
      );
   }
}
export default hot(module)(App);

另外，还需要修改dev命令，添加上–hot，完成后我们运行npm run dev进行测试，发现更改源代码而页面会自动替换并且不会刷新页面，说明React热替换已实现
我们可以查阅npm官网查看对react-hot-loader的说明和使用方法等等，加深理解。本次学习和试验到这里告一段落~~~