从零学脚手架(八)---webpack-dev-server源码分析
上一篇中介绍了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会进入一个设置页面