上一篇中介绍了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. mybatis（六）插件机制及分页插件原理

    转载:https://www.cnblogs.com/wuzhenzhao/p/11120848.html MyBatis 通过提供插件机制,让我们可以根据自己的需要去增强MyBatis 的功能.需要 ...

  2. 解决springmvc使用@ResponseBody返回String类型字符串中文乱码问题

    问题分析: 首先: 确定的是只有当返回值是 String时才会出现中文乱码,而当返回值是Map<String, Object>或者是其它类型时,并没有中文乱码的出现. 然后找原因: 原因是 ...

  3. Storybook 最新教程

    Storybook 最新教程 Storybook is the most popular UI component development tool for React, Vue, and Angul ...

  4. Vue Learning Paths

    Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...

  5. CodeMirror动态修改代码（关键： editor.getDoc().setValue(data); editor.refresh();）

    在使用codemirror时,其原理是根据form中的textarea标签,自动加载其内容,获得代码行的显示.(具体使用方式参见 codemirror官网使用手册 http://codemirror. ...

  6. Python算法_整数反转（02）

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123输出: 321 示例 2: 输入: -123输出: -321 示例 3: 输入: 120 输出: 2 ...

  7. 不能回滚的Redis事务还能用吗

    前言 事务是关系型数据库的特征之一,那么作为 Nosql 的代表 Redis 中有事务吗?如果有,那么 Redis 当中的事务又是否具备关系型数据库的 ACID 四大特性呢? Redis 有事务吗 这 ...

  8. three.js cannon.js物理引擎之ConvexPolyhedron多边形

    年后第一天上班,郭先生来说一说cannon.js的ConvexPolyhedron(多边形),cannon.js是一个物理引擎,内部通过连续的计算得到各个时间点的数据的状态,three.js的模型可以 ...

  9. Vulhun-y0usef靶机通关

    Vulhub-y0sef靶机通关 安装靶机环境,下载地址:https://www.vulnhub.com/entry/y0usef-1,624/ 网络模式:桥接 目标:user.txt和root.tx ...

  10. Python2和Python3编码的区别

    Python2 python2中有两种储存变量的形式,第一种:Unicode:第二种:按照coding头来的. 假设python2用utf8存储x='中文',当你print(x)的时候,终端接收gbk ...