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 EasyUI 中文API Button使用实例
Apr 14 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Vue分页组件实例代码
Apr 17 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
加速vue组件渲染之性能优化
Apr 09 Javascript
vue实现简单跑马灯效果
May 25 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 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
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python绘制随机网络图形示例
2019/11/21 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
文明村创建实施方案
2014/03/27 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL