本文介绍了react-webpack2——热模块替换(HMR),分享给大家,具体如下:
模块热替换功能会在应用程序运行过程中替换,添加或删除模块,而无需重新加载页面。这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间。
<>强巴别塔配置
需要先下载<代码> npm安装——save-dev react-hot-loader@3.0.0-beta.6
然后在.babelrc中配置
{
“预设”:(
[" es2015 ",{“模块”:假}],//webpack 2中需要这样配置禁用
“阶段”,
“反应”
),
“插件”:(
“react-hot-loader/巴别塔”//开启反应代码的模块热替换(HMR)
]
}
之前
<强> webpack配置
入口插入模块热替换
条目:{
应用:[
“react-hot-loader/补丁”,//开启反应代码的模块热替换(HMR)
“webpack-dev-server/客户# 63;http://localhost: 8080”,//为webpack-dev-server的环境打包代码//然后连接到指定服务器域名与端口,可以换成本机ip
“webpack/热/only-dev-server”,//为热替换(HMR)打包好代码//>
输出:{
路径:defPath.DEV_PATH,//所有输出文件的目标路径
文件名:“js/bundle.js ',
publicPath: '/',
chunkFilename:“[名字].chunk.js”
},
之前
插件添加相应插件
插件:[
新webpack.HotModuleReplacementPlugin (),//开启全局的模块热替换(HMR)
新的webpack.NamedModulesPlugin ()//控制台输出模块命名美化
]
之前
devServer配置HMR
devServer: {//渌渲?
热点:没错,//开启服务器的模块热替换(HMR)
contentBase: defPath.DEV_PATH,//输出文件的路径
publicPath:“/?/和输出的publicPath保持一致
}
之前
<强>应用代码中修改
应用代码中需要做很大的改动
<强>拆分原入口文件
新建一个根组件,存放原入口文件中的路由配置部分
/*
根,路由器配置
*/从“反应”进口的反应;
从“react-redux”进口{提供商};
从“react-router”进口{browserHistory,路由器};
从“react-router-redux”进口{syncHistoryWithStore};
从“. ./存储/指数”进口商店;//引入配置后的商店
从“. ./routes.js”进口航线;//子级路由配置//创建一个增强版的历史来结合店同步导航事件
const browhistory=syncHistoryWithStore (browserHistory、存储);
const根=()=比;（
& lt;提供程序存储={商店}祝辞
& lt; div>
& lt;路由器历史=={路线}/{browhistory}路线比;
& lt;/div>
& lt;/Provider>
);
出口默认根;
之前
原入口文件改为
/*
应用程序/js/index.js
入口文件,配置webpack热加载模块
*/进口“. ./scss/index.scss”;
进口“. ./scss/commoncom.scss”;
从“反应”进口的反应;
从“进口ReactDOM react-dom ';
从“react-hot-loader”进口{AppContainer};//引入react-hot-loader提供的容器
从“进口injectTapEventPlugin react-tap-event-plugin ';//引入总路由的配置模块
从“进口根。/集装箱/根的;//定义要挂载的DOM节点
const mountNode=. getelementbyid(“软件”);//反应的插件,提供onTouchTap ()
injectTapEventPlugin ();//封装呈现函数
const渲染=(组件)=比;{
ReactDOM.render ((
& lt; AppContainer>
& lt;组件/比;
& lt;/AppContainer>
),mountNode);
};//初始化调用
呈现(根);//配置需要热模块替换的条件
如果模块。热,,process.env。NODE_ENV !==?{//处理对特定依赖的更改
module.hot.accept ('。/集装箱/根”,(err)=比;{
如果(err) {
console.log(错);
}//从DOM中移除已经挂载的反应组件然后重装
ReactDOM.unmountComponentAtNode (mountNode);
呈现(根);
});
}
之前
以上就可以使用webpack 2模块热替换,希望对大家的学习有所帮助,也希望大家多多支持。
