未加星标

详解react-webpack2-热模块替换[HMR]

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下:

模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载页面。这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间。

babel 配置

需要先下载 npm install --save-dev [email protected]

然后在 .babelrc 中配置

{
"presets": [
["es2015", {"modules": false}], // webpack 2 中需要这样配置禁用
"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: [
new webpack.HotModuleReplacementPlugin(),
// 开启全局的模块热替换(HMR)
new webpack.NamedModulesPlugin()
// 控制台输出模块命名美化
]

devServer 配置 HMR

devServer: {
// ... 其他配置
hot: true,
// 开启服务器的模块热替换(HMR)
contentBase: defPath.DEV_PATH,
// 输出文件的路径
publicPath: '/'
// 和 output 的 publicPath 保持一致
}

应用代码中修改

应用代码中需要做很大的改动

拆分原入口文件

新建一个根组件,存放原入口文件中的路由配置部分

/*
Root, Router 配置
*/
import React from 'react';
import {Provider} from 'react-redux';
import {browserHistory, Router} from 'react-router';
import {syncHistoryWithStore} from 'react-router-redux';
import store from '../store/index'; // 引入 配置后的 store
import routes from '../routes.js'; // 子级路由配置
// 创建一个增强版的history来结合store同步导航事件
const browhistory = syncHistoryWithStore(browserHistory, store);
const Root = () => (
<Provider store={store}>
<div>
<Router history={browhistory} routes={routes}/>
</div>
</Provider>
);
export default Root;
原入口文件改为

/*
app/js/index.js
入口文件, 配置 webpack 热加载模块
*/
import '../scss/index.scss';
import '../scss/commoncom.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
// 引入 react-hot-loader 提供的容器
import injectTapEventPlugin from 'react-tap-event-plugin';
// 引入总路由的配置模块
import Root from './containers/Root';
// 定义要挂载的 DOM 节点
const mountNode = document.getElementById('app');
// react 的插件,提供onTouchTap()
injectTapEventPlugin();
// 封装 render 函数
const render = (Component) => {
ReactDOM.render((
<AppContainer>
<Component/>
</AppContainer>
), 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);
});
}

以上就可以使用 webpack 2 模块热替换,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React服务器删除出口成本
分页:12
转载请注明
本文标题:详解react-webpack2-热模块替换[HMR]
本站链接:http://www.codesec.net/view/560331.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(34)