上一篇中介绍了webpack-dev-server属性配置

这一篇就简单的梳理下webpack-dev-server内部实现。

由于涉及到源码解析，所以会涉及到一些比较难啃的知识，我会尽量进行简单化描述。

但如果还是具有具有难度 或 对 webpack-dev-server内部实现不感兴趣的朋友，也可以完全跳过此篇。

调试webpack-dev-server

配置调试方式

日常开发开发中，如果对代码逻辑不熟悉，最简单的方法就是调试，一步步观察流程。

学习webpack-dev-server源码，最简单的方法也就是就行调试，不过调试webpack-dev-server源码毕竟不像调试本身项目代码那样简单，必定需要做一些配置，

下面先简单介绍两种源码webpack-dev-server方式

浏览器调试

现在都知道webpack是执行于Node.js环境下，所以调试webpack也就是调试Node.js程序。

伟大的Chrome浏览器就给我们提供了调试Node.js程序的方案。

首先在package.json文件scripts属性中添加了一个debug指令，使用这个命令启动调试Node.js程序

inspect-brk属性就是设置调试Node.js程序参数 ：

5858代表启动Node.js程序的端口号

./node_modules/webpack-dev-server/bin/webpack-dev-server.js 文件代表调试的指定文件，

接下来就该设置浏览器

在Chrome浏览器地址栏输入chrome://inspect会进入一个设置页面

从零学脚手架(八)---webpack-dev-server源码分析的更多相关文章

  1. Appium Server源码分析之作为Bootstrap客户端

    Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...

  2. 转载-FileZilla Server源码分析（1）

    FileZilla Server源码分析(1) 分类: VC 2012-03-27 17:32 2363人阅读 评论(0) 收藏 举报 serversocketftp服务器usersockets工作 ...

  3. Appium Server 源码分析之启动运行Express http服务器

    通过上一个系列Appium Android Bootstrap源码分析我们了解到了appium在安卓目标机器上是如何通过bootstrap这个服务来接收appium从pc端发送过来的命令,并最终使用u ...

  4. 从零学脚手架(三)---webpack属性详解

    如果此篇对您有所帮助,在此求一个star.项目地址: OrcasTeam/my-cli 在上一篇中,介绍了webpack的entry.output.plugins属性. 在这一篇,接着介绍其它配置属性 ...

  5. 重学c#系列——盛派自定义异常源码分析(八)

    前言 接着异常七后,因为以前看过盛派这块代码,正好重新整理一下. 正文 BaseException 首先看下BaseException 类: 继承:public class BaseException ...

  6. Thrift笔记(五)--Thrift server源码分析

    从(四)server代码跟进 public static void simple(MultiplicationService.Processor processor) { try { TServerT ...

  7. darwin Stream Server源码分析

    摘要 ​所谓的流式媒体简单的讲就是指人们通过网络实时的收看多媒体信息:如音频流.视频流等.与流式媒体对应的传统工作方式是下载+播放模式,即用户首先下载多媒体文件,然后再在本地播放,这种方法的一个主要缺 ...

  8. Go 语言 HTTP Server 源码分析

    http://www.codeceo.com/go-http-server-code.html

  9. Netty源码分析 （八）----- write过程 源码分析

    上一篇文章主要讲了netty的read过程,本文主要分析一下write和writeAndFlush. 主要内容 本文分以下几个部分阐述一个java对象最后是如何转变成字节流,写到socket缓冲区中去 ...

随机推荐

  1. 编程方式建视频——GitHub 热点速览 v.21.07

    作者:HelloGitHub-小鱼干 假期过半,大家过得如何,吃好喝好了吗?GitHub 很好!本周的 GitHub Trending 又上爆款项目--github1s 装完之后,一秒 GitHub ...

  2. GUI编程

    组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事 破解工具 简介 GUI的核心技术:Swing AWT 界面不美观 需要jre环境 为了了解MVC架构 了解监听. AWT 包 ...

  3. 正则表达式: javascript Unicode 中文字符 编码区间：\u4e00-\u9fa5

    正则表达式: javascript Unicode 中文字符  编码区间:\u4e00-\u9fa5 RegExp 对象 javascript Unicode 中文字符的 编码区间: \u4e00-\ ...

  4. Lua 从入门到放弃

    Lua 从入门到放弃 What is Lua? Lua is a powerful, efficient, lightweight, embeddable scripting language. It ...

  5. HTML Imports & deprecated

    HTML Imports & deprecated https://caniuse.com/#search=html imports https://www.chromestatus.com/ ...

  6. js bese64转化为blob使用FormData上传

    原文 工作示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. NGK：价值对标比特币，上线暴涨4558%，下一个财富暴增风口

    近期,美股行情多变,一直饱受争议的比特币也成了其中的"弄潮儿".看多者认为,机构的兴趣有助于支撑比特币作为对冲美元疲软和通胀的工具. 特别是今年1月底的时候,马斯克将推特简介更改为 ...

  8. NGK Global伦敦路演：“区块链+能源”必将推动世界性能源革命

    随着区块链技术的发展和应用的不断完善深入,市场的热情也开始活跃高涨,在万众期待下,NGK Global在英国伦敦的路演于7月25日圆满举办. 此次伦敦路演会议中众多行业精英,各社区代表.星盟投资公司资 ...

  9. Java 添加 、读取以及删除PPT幻灯片中的视频、音频文件

    在PPT中,可以操作很多种元素,如形状.图形.文字.图片.表格等,也可以插入视频或者音频文件,来丰富幻灯片的内容呈现方式.下面将介绍在Java程序中如何来添加视频.音频文件到PPT幻灯片,读取和删除幻 ...

  10. ClickHouse源码笔记3:函数调用的向量化实现

    分享一下笔者研读ClickHouse源码时分析函数调用的实现,重点在于分析Clickhouse查询层实现的接口,以及Clickhouse是如何利用这些接口更好的实现向量化的.本文的源码分析基于Clic ...