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

 更新时间:2017年08月03日 11:43:05   作者:mjzhang1993  
这篇文章主要介绍了详解react-webpack2-热模块替换[HMR], 小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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 模块热替换,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React编程中需要注意的两个错误

    React编程中需要注意的两个错误

    React可以说是前端的先驱者,它总是会引领整个前端的潮流。 但我们在使用也经常会遇到错误,下面这篇文章主要给大家介绍了关于React编程中需要注意的两个错误,需要的朋友可以参考下
    2021-05-05
  • react-native 实现购物车滑动删除效果的示例代码

    react-native 实现购物车滑动删除效果的示例代码

    这篇文章主要介绍了react-native 实现购物车滑动删除效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 在react项目中使用antd的form组件,动态设置input框的值

    在react项目中使用antd的form组件,动态设置input框的值

    这篇文章主要介绍了在react项目中使用antd的form组件,动态设置input框的值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • react-native使用react-navigation进行页面跳转导航的示例

    react-native使用react-navigation进行页面跳转导航的示例

    本篇文章主要介绍了react-native使用react-navigation进行页面跳转导航的示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • React antd tabs切换造成子组件重复刷新

    React antd tabs切换造成子组件重复刷新

    这篇文章主要介绍了React antd tabs切换造成子组件重复刷新,需要的朋友可以参考下
    2021-04-04
  • 详解React Native 采用Fetch方式发送跨域POST请求

    详解React Native 采用Fetch方式发送跨域POST请求

    这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React 路由懒加载的几种实现方案

    React 路由懒加载的几种实现方案

    这篇文章主要介绍了React 路由懒加载的几种实现方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • React 源码中的依赖注入方法

    React 源码中的依赖注入方法

    这篇文章主要介绍了React 源码中的依赖注入方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • ReactNative页面跳转实例代码

    ReactNative页面跳转实例代码

    这篇文章主要介绍了ReactNative页面跳转的代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • React虚拟列表的实现

    React虚拟列表的实现

    在开发过程中,总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器,终会导致浏览器的性能下降,你可以选择其他方式避免,本文就介绍了虚拟列表来解决这个问题
    2021-05-05

最新评论