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 技术实现的更多相关文章

  1. [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 ...

  2. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  5. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  6. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  7. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  8. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  9. Vue.js如何搭建本地dev server和json-server 模拟请求服务器

    前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...

随机推荐

  1. RobotFramework第二篇之web自动化

    (1)安装seleniumLibrary库: pip install --upgrade --pre robotframework-seleniumlibrary 使用第三方库关键字: (1)sett ...

  2. Conway生命游戏

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/9986679.html 作者:窗户 Q ...

  3. Flink应用案例:How Trackunit leverages Flink to process real-time data from industrial IoT devices

    January 22, 2019Use Cases, Apache Flink Lasse Nedergaard     Recently there has been significant dis ...

  4. 突击战 (uva 11729)贪心

    思路:就是把J大的放在前面.为什么这样贪心呢? 看看这个图 #include<iostream> #include<algorithm> #include<vector& ...

  5. Spring第一天——入门与IOC

    大致内容 spring基本概念 IOC入门 [17.6.9更新],如何学习spring? 掌握用法 深入理解 不断实践 反复总结 再次深入理解与实践 一.Spring相关概念  1.概述: Sprin ...

  6. jeecg入门操作—一对多表单开发

    一.创建主表 创建订单主表(torder_main)  二.创建附表客户信息表(torder_customer) 设置附表页面外键不可见 设置附表外键  三.创建附表机票 信息表(torder_tic ...

  7. Nonlinear Component Analysis as a Kernel Eigenvalue Problem

    目录 引 kernel PCA kernel 的选择 性质 一些问题 代码 Scholkopf B, Smola A J, Muller K, et al. Nonlinear component a ...

  8. 我的工具:Ping工具

    C# Ping工具 通过该工具可以多个地点Ping服务器以检测服务器响应速度,同时也可以测试网站的响应速度,解析时间,服务器连接时间,下载速度 工具下载地址:https://download.csdn ...

  9. Java导出压缩包工具类

    /** * @Title: exportZip * @Description:TODO(导出建压缩文件) * @param delAdviceinfo 为项目实体类 * @date 2018年4月4日 ...

  10. RabbitMQ之php-amqplib使用

    PHP下使用rabbitmq可以使用第三方类库来实现 技术参考: https://rabbitmq.shujuwajue.com/tutorials_with_php/[1]Hello_World.h ...