详解react-webpack2-热模块替换[HMR]
时间:2019-03-30
本文章向大家介绍详解react-webpack2-热模块替换[HMR],主要包括详解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 模块热替换,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 24(02)多线程锁,线程通讯,线程组,线程池,多线程三种方式,匿名内部类,定时器,设计模式,单例模式,Runtime
- Go代码打通HTTPs
- 一个简单的MySQL参数导致的连接问题解惑(r7笔记第33天)
- [基础篇]Go语言变量
- [转载]Golang 编译成 DLL 文件
- [转载]Go JSON 技巧
- 简单易学的机器学习算法——Rosenblatt感知机的对偶解法
- Spring-拾遗
- Golang面试题
- 简单易学的机器学习算法——基于密度的聚类算法DBSCAN
- 厚土Go学习笔记 | 29. 接口
- Golang Template 简明笔记
- hotspare的copyback(r7笔记第30天)
- Spring-AOP
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kali内网使用正向shell入侵
- KALI拿到shell后提权操作
- KALI 内网渗透记录
- CentOS7部署Grafana
- CentOS7网卡配置文件详解
- 基于docker搭建jenkins
- [周末往期回顾]Oracle Data Guard 参数介绍
- 程序员必备CDN加速jsDelivr+Gihub远程仓库
- java_方法的定义、调用、重载
- Oracle参数解析(nls_calendar)
- java_List、Set、Conllections工具类
- Oracle参数解析(OPEN_CURSORS)
- java_Collection、Map、泛型的使用
- java_线程、同步、线程池
- Oracle参数解析(nls_timestamp_format)