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


Posted in Javascript onAugust 03, 2017

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

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

babel 配置

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

然后在 .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 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
vue实现简单瀑布流布局
May 28 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
webpack开发跨域问题解决办法
Aug 03 #Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 #Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 #Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
用函数读出数据表内容放入二维数组
2006/10/09 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python 线程池用法简单示例
2019/10/02 Python
python计算auc的方法
2020/09/09 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
盛大笔试题
2016/11/05 面试题
应届本科生推荐信范文
2013/12/25 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
公司表扬信格式
2015/05/04 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
女性励志书籍推荐
2019/08/19 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL