webpack中的热刷新与热加载的区别


Posted in Javascript onApril 09, 2018

webpack非常的强大,合理的脚手架可以为我们的工作省去众多繁琐无意义的工作。其中热刷新、热加载相较于传统开发大大提高了开发节奏。

从脚手架发现热刷新、热加载的差异

相信大部分的vue开发者都是从vue-cli开始的,很多初学者欢快的跑着vue项目却不敢改随意改变vue-cli的配置(毕竟webpack确实很复杂,vue-cli也做了很多工作来优化初学者的体验)。

相比之下react没有提供一个比较健壮的脚手架了(至少没有明显地被我找到,望赐教)。据我知一个是yeoman的 generator-react-webpack、react的create-react-app,还有一个不错的react-starter-kit (热加载,而且集成了非常多代码,参考性很高)。
在学习react时我就发现了上文提到的react前两个脚手架提供的是热刷新而非热加载。

简单的区分热加载与热刷新:

热刷新:文件内动改动后,整个页面刷新,不保留任何状态(比如输入过内容的Input表单),相当于webpack帮你摁了F5刷新
热加载:文件改动后,以最小的代价改变被改变的区域。尽可能保留改动文件前的状态(对input输入内容后,修改其他标签的代码)

这在虽然两者相较于传统开发(手动F5)都提升了开发体验,但两者之间的依旧很大,尤其是当项目变得愈发复杂之后,我们必须一劳永逸的解决这个问题(留出更多的时间来开发bug)。

动手修改

从头配置就是另一个领域了,所以我们直接从vue-cli开始改动。

下述步骤仅列出关键做启发参考,详细请参考最后github完整项目

  1. 删除vue相关的依赖、文件等;整个scr内的东西都可以删掉
  2. package.json依赖加入babel-loader webpack-dev-server react-hot-loader(最关键)
  3. package.json命令行设置 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  4. webpack.base.conf 添加.jsx文件需要经过babel-loader处理,配置options:{plugins:['react-hot-loader/babel']}
  5. .babelrc presets加入react,下方加入plugins:['react-hot-loader/babel']
  6. src文件夹下创建main.js(起名要跟webpack配置的入口文件一致)
import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';

import App from './pages/App'; // 自己写吧
import './assets/css/reset.scss';

// Render the main component into the dom
ReactDOM.render(<App/>, document.getElementById('app'));

export default hot(module)(App); // 热加载的关键

至此,我们就可以愉快地使用react体验热加载的快♂感了~

问题所在

其实在简单地修改vue-cli中的main.js文件为react相关代码(别忘了配置babel处理jsx)并依旧是热刷新。

经过本地代码观察对比后,发现了一个吸引人的名字:

在webpack.dev.conf文件中:

new webpack.HotModuleReplacementPlugin()

网上查询后得知这是实现热加载的关键,它需要代码本身具备模块化的性质(这意味着只要像三大框架这样可编写可复用组件的框架都能利用这个性质),这样才可以通过插♂拔代码实现热加载。

而react的jsx特效不是HotModuleReplacementPlugin能搞定的只能老老实实热刷新了。

在这种情况下react-hot-loader呼之欲出。配合官方的使用方法,就能继续使用热加载了。

ps: 仅做参考,react的很多代码我也处于探索与学习中

配置好的项目地址:gayhub

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自定义下拉列表示例
Apr 25 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
js实现简单选项卡制作
Aug 05 Javascript
vue写一个组件
Apr 09 #Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 #Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 #Javascript
vue脚手架及vue-router基本使用
Apr 09 #Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 #Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
You might like
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
对联广告js flash激活
2006/10/19 Javascript
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
学习python (2)
2006/10/31 Python
分享6个隐藏的python功能
2017/12/07 Python
Django 多环境配置详解
2019/05/14 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
2014年德育工作总结
2014/11/20 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
2016教师节问候语
2015/11/10 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
html粘性页脚的具体使用
2022/01/18 HTML / CSS