上一篇中介绍了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会进入一个设置页面

版权声明:本文为yan7原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/yan7/p/14499362.html