本文介绍了react-webpack2-热模块替换[HMR]，分享给大家，具体如下：
模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载页面。这使得你可以在独立模块变更后，无需刷新整个页面，就可以更新这些模块，极大地加速了开发时间。
babel 配置
需要先下载 npm install --save-dev react-hot-loader@3.0.0-beta.6
然后在 .babelrc 中配置
webpack 配置
入口插入模块热替换
代码的模块热替换(HMR)
'webpack-dev-server/client?http://localhost:8080',// 为 webpack-dev-server 的环境打包<a href="/tag/daima/" target="_blank" class="keywords">代码</a>
// 然后连接到指定服务器域名与端口，可以换成本机ip
'webpack/hot/only-dev-server',// 为热替换(HMR)打包好<a href="/tag/daima/" target="_blank" class="keywords">代码</a>
// only- 意味着只有成功更新运行<a href="/tag/daima/" target="_blank" class="keywords">代码</a>才会执行热替换(HMR)
'./index.js'
// 我们 app 的入口<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>
],vendor: ['react','react-router']
// 公共<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>打包}
出口配置 publicPath，（必须配置）
new webpack.NamedModulesPlugin()
// 控制台<a href="/tag/shuchu/" target="_blank" class="keywords">输出</a>模块命名美化
]
devServer 配置 HMR
hot: true,// 开启服务器的模块热替换(HMR)
contentBase: defPath.DEV_PATH,// <a href="/tag/shuchu/" target="_blank" class="keywords">输出</a><a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>的路径
publicPath: '/'
// 和 output 的 publicPath 保持一致
}
应用代码中修改
应用代码中需要做很大的改动
拆分原入口文件
新建一个根组件，存放原入口文件中的路由配置部分
import store from '../store/index'; // 引入 配置后的 store
import routes from '../routes.js'; // 子级路由配置
@H_301_50@
);
import routes from '../routes.js'; // 子级路由配置
// 创建一个增强版的history来结合store同步导航事件
const browhistory = syncHistoryWithStore(browserHistory,store);
const Root = () => (
export default Root;
