webpack-dev-server live reloading 技术实现
webpack-dev-server live reloading
https://github.com/webpack/webpack-dev-server
Use webpack with a development server that provides live reloading.
开发者服务器,实现代码修改后,自动编译, 自动发布, 浏览器自动刷新动作。
具体实现,观察推测分析应该使用如下几种技术。
文件变化观测
文件变化后,会触发后续的一些列动作, 包括 代码编译 -》 构建结果发布 -》 前端浏览器自动刷新。
最关键的一步就是文件被修改了, 如何观测到?
应用层建立观测机制, 不太合理, 否则需要应用层做很多的轮询动作。所以需要系统支持。
https://zhuanlan.zhihu.com/p/37658721
使用 fs.watch
使用
fs
的另一个内置函数watch
是更好的选择:fs.watch(dir, (event, filename) => {});
watch
通过操作系统提供的文件更改通知机制,在 Linux 操作系统使用 inotify,在 macOS 系统使用 FSEvents,在 windows 系统使用 ReadDirectoryChangesW,而且可以用来监听目录的变化,在监听文件夹的场景中,比创建 N 个fs.watchfile
效率高出很多。
https://www.ibm.com/developerworks/cn/linux/l-inotify/
inotify 介绍
从文件管理器到安全工具,文件系统监控对于的许多程序来说都是必不可少的。从 Linux 2.6.13 内核开始,Linux 就推出了 inotify,允许监控程序打开一个独立文件描述符,并针对事件集监控一个或者多个文件,例如打开、关闭、移动/重命名、删除、创建或者改变属性。在后期的内核中有了很多增强,因此在依赖这些特性之前,请先检查您的内核版本。
查看源码,服务器端实际使用了 chokidar 库来检测文件变化。
const chokidar = require('chokidar');
编译触发&发布
解决了文件变化观测的机制, 在文件检测的回调函数中, 自动触发 开发版本的webpack编译, 依据配置 webpack.dev.config.json
这个阶段是同步,执行完毕后, 并将编译结果拷贝到目标文件中。
最后会想浏览器发送消息, 有代码变动的消息, 并指示浏览器进行更新, 辅助开发者调试结果。如何通知呢?
sockjs建立实时通信通道
客户端和服务器使用sockjs库实现socket实时通信,在后端检测到文件变化, 且编译发布完成后, 会主动通知前端, 前端执行刷新动作。
客户端sockjs-client
https://github.com/webpack/webpack-dev-server/tree/master/client-src/sockjs
'use strict'; module.exports = require('sockjs-client');
https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js
const sockjs = require('sockjs');
其它
有博客提供了类似的功能的实现方法:
http://www.cnblogs.com/mengbaobao/p/4773662.html
使用开发工具IDE, ADOBE brackets也实现了类似功能, 一边写HTML CSS JS, 另外一边网页实现自动更新。
webpack-dev-server live reloading 技术实现的更多相关文章
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- webpack 4 & dev server
webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...
- vue-cli脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- Vue.js如何搭建本地dev server和json-server 模拟请求服务器
前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...
随机推荐
- 深入理解内存映射mmap
内存映射mmap是Linux内核的一个重要机制,它和虚拟内存管理以及文件IO都有直接的关系,这篇细说一下mmap的一些要点. 修改(2015-11-12):Linux的虚拟内存管理是基于mmap来实现 ...
- python3 list列表随机选取一个元素、随机选择一个user-agent
爬虫时适当更换user-agent可以稍微规避一下代理被封的风险... from random import sample ua = [ 'Mozilla/4.0 (compatible; MSIE ...
- ztree搜索节点并展开
web <div class="zTreeC"> <div class="searchL" lay-filter="searchL& ...
- 【题解】P2922 [USACO08DEC]秘密消息Secret Message
\(\text{Tags}\) 字典树,统计 题意: 给出两组\(\text{0/1}\)串\(\text{A,B}\),求解\(\text{A}\)中某串是\(\text{B}\)中某串的前缀,和\ ...
- java多线程编程之连续打印abc的几种解法
一道编程题如下: 实例化三个线程,一个线程打印a,一个线程打印b,一个线程打印c,三个线程同时执行,要求打印出10个连着的abc. 题目分析: 通过题意我们可以得出,本题需要我们使用三个线程,三个线程 ...
- button JS篇ant Design of react之二
最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...
- 类Math
概述 java.lang.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数.类似这样的工具 类,其所有方法均为静态方法,并且不会创建对象,调用起来非常简单. 常用方法 ...
- flex.css
flex.css:https://codepen.io/webstermobile/pen/apXEER/
- maven依赖scope配置项讲解(转)
原文:https://blog.csdn.net/lisongjia123/article/details/56299006 <scope>的分类一.complie编译域,这个是Maven ...
- 关于 Be 主
大三在校生 每天不定刷 Leetcode POJ HDU 以及其他算法专题 自己很菜 还没有能力可以帮助别的旁友解决问题 :-( 毕竟有个人每天看着你写代码还是很幸福的事情呢 还是要骄傲夸一下 FH ...