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

本文介绍了react-webpack2-热模块替换[HMR]，分享给大家，具体如下：

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

babel 配置

需要先下载 npm install --save-dev react-hot-loader@3.0.0-beta.6

然后在 .babelrc 中配置

rush:js;"> { "presets": [ ["es2015",{"modules": false}],// webpack 2 中需要这样配置禁用

"stage-2","react"
],"plugins": [
"react-hot-loader/babel"
// 开启 React 代码的模块热替换(HMR)
]
}

webpack 配置

入口插入模块热替换

rush:js;"> entry: { app: [ 'react-hot-loader/patch',// 开启 React 代码的模块热替换(HMR)

  'webpack-dev-server/client?http://localhost:8080',// 为 webpack-dev-server 的环境打包<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
  // 然后连接到指定服务器域名与端口，可以换成<a href="https://www.jb51.cc/tag/benjiIP/" target="_blank" class="keywords">本机IP</a>

  'webpack/hot/only-dev-server',// 为热替换(HMR)打包好<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
  // only- 意味着只有成功更新运行<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>才会执行热替换(HMR)


  './index.js'
  // 我们 app 的入口<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>
],<a href="https://www.jb51.cc/tag/vend/" target="_blank" class="keywords">vend</a>or: ['react','react-router']
// 公共<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>打包

}

出口配置 publicPath，（必须配置）

rush:js;"> output: { path: defPath.DEV_PATH,// 所有输出文件的目标路径

filename: 'js/bundle.js',publicPath: '/',chunkFilename: '[name].chunk.js'

},

plugins 添加相应插件

rush:js;"> plugins: [ new webpack.HotModuleReplacementPlugin(),// 开启全局的模块热替换(HMR)

new webpack.NamedModulesPlugin()
// 控制台<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>模块命名美化

]

devServer 配置 HMR

rush:js;"> devServer: { // ... 其他配置

hot: true,// 开启服务器的模块热替换(HMR)

contentBase: defPath.DEV_PATH,// <a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>的路径

publicPath: '/'
// 和 output 的 publicPath 保持一致

}

应用代码中修改

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

拆分原入口文件

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

import store from '../store/index'; // 引入 配置后的 store
import routes from '../routes.js'; // 子级路由配置

// 创建一个增强版的history来结合store同步导航事件
const browhistory = syncHistoryWithStore(browserHistory,store);

const Root = () => (

);

export default Root;

原入口文件改为

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((

),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 模块热替换，希望对大家的学习有所帮助，也希望大家多多支持编程之家。