详解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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
Vue实现开心消消乐游戏算法
Oct 22 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
js实现选项卡效果
2020/03/07 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python实现ID3决策树算法
2017/12/20 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
大学生军训感想
2014/02/16 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
美术学专业求职信
2014/07/23 职场文书
民事授权委托书范文
2014/08/02 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
故宫导游词
2015/01/31 职场文书
实施意见格式范本
2015/06/05 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
SQLServer常见数学函数梳理总结
2022/08/05 MySQL