详解react-webpack2-热模块替换[HMR]
本文介绍了react-webpack2-热模块替换[HMR]，分享给大家，具体如下：
模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载页面。这使得你可以在独立模块变更后，无需刷新整个页面，就可以更新这些模块，极大地加速了开发时间。
babel配置
需要先下载npminstall--save-devreact-hot-loader@3.0.0-beta.6
然后在.babelrc中配置
{
"presets":[
["es2015",{"modules":false}],//webpack2中需要这样配置禁用
"stage-2",
"react"
],
"plugins":[
"react-hot-loader/babel"
//开启React代码的模块热替换(HMR)
]
}
webpack配置
入口插入模块热替换
entry:{
app:[
'react-hot-loader/patch',
//开启React代码的模块热替换(HMR)
'webpack-dev-server/client?http://localhost:8080',
//为webpack-dev-server的环境打包代码
//然后连接到指定服务器域名与端口，可以换成本机ip
'webpack/hot/only-dev-server',
//为热替换(HMR)打包好代码
//only-意味着只有成功更新运行代码才会执行热替换(HMR)
'./index.js'
//我们app的入口文件
],
vendor:['react','react-router']
//公共文件打包
}
出口配置publicPath，（必须配置）
output:{
path:defPath.DEV_PATH,
//所有输出文件的目标路径
filename:'js/bundle.js',
publicPath:'/',
chunkFilename:'[name].chunk.js'
},
plugins添加相应插件
plugins:[ newwebpack.HotModuleReplacementPlugin(), //开启全局的模块热替换(HMR) newwebpack.NamedModulesPlugin() //控制台输出模块命名美化 ]
devServer配置HMR
devServer:{
//...其他配置
hot:true,
//开启服务器的模块热替换(HMR)
contentBase:defPath.DEV_PATH,
//输出文件的路径
publicPath:'/'
//和output的publicPath保持一致
}
应用代码中修改
应用代码中需要做很大的改动
拆分原入口文件
新建一个根组件，存放原入口文件中的路由配置部分
/*
Root,Router配置
*/
importReactfrom'react';
import{Provider}from'react-redux';
import{browserHistory,Router}from'react-router';
import{syncHistoryWithStore}from'react-router-redux';
importstorefrom'../store/index';//引入配置后的store
importroutesfrom'../routes.js';//子级路由配置
//创建一个增强版的history来结合store同步导航事件
constbrowhistory=syncHistoryWithStore(browserHistory,store);
constRoot=()=>(
原入口文件改为
/*
app/js/index.js
入口文件,配置webpack热加载模块
*/
import'../scss/index.scss';
import'../scss/commoncom.scss';
importReactfrom'react';
importReactDOMfrom'react-dom';
import{AppContainer}from'react-hot-loader';
//引入react-hot-loader提供的容器
importinjectTapEventPluginfrom'react-tap-event-plugin';
//引入总路由的配置模块
importRootfrom'./containers/Root';
//定义要挂载的DOM节点
constmountNode=document.getElementById('app');
//react的插件，提供onTouchTap()
injectTapEventPlugin();
//封装render函数
constrender=(Component)=>{
ReactDOM.render((
),mountNode);
};
//初始化调用
render(Root);
//配置需要热模块替换的条件
if(module.hot&&process.env.NODE_ENV!=='production'){
//处理对特定依赖的更改
module.hot.accept('./containers/Root',(err)=>{
if(err){
console.log(err);
}
//从DOM中移除已经挂载的React组件然后重装
ReactDOM.unmountComponentAtNode(mountNode);
render(Root);
});
}
以上就可以使用webpack2模块热替换，希望对大家的学习有所帮助，也希望大家多多支持毛票票。