【webpack 插件开发】如何在vscode调试webpack源码

前言

❝

最近打算深入学习下webpack原理，打算翻翻源码，借此更新webpack系列的知识点，平时学习的底稿也挺多的，也该整理出来了

❞

暂定会更新以下知识点

• 如何实现一个webpack loader

• 如何实现一个webpack plugin

• 谈谈Tapable

• 实现一个简易的webpack

• debug webpack源码

如何在vscode调试源码

❝

先学会调试源码，在后面开发loader或者plugin会显得更得心应手，以下是我调试less-loader的分享

❞

使用 vscode + npm 插件

❝

在 vscode 中安装插件 egamma/npm 插件。该插件可以帮我们界面直接点击去运行 package.json 文件中 scripts 下面定义的脚本命令。安装完成之后，在 Explorer 界面中会出现 NPM SCRIPTS 的面板，其中就会解析 package.json 中定义的脚本命令，这样只需要点击即可，不用每次手输命令行，还带有 debug 功能，方便调试。

❞

image.png

然后，在程序中想要打断点的地方打上断点。例如想要看一下，less-loader 在打包时候的运行过程， 我们可以手动clone less-loader项目，然后手动引入， 文件中对应位置打上断点，然后再 NPM SCRIPTS 面板对应命令上点击 debug 按钮，就可以让程序停止再断点处，非常方便调试。

image.png

image.png

使用 chrome 浏览器调试

参考博客

首先再想要调试的地方添加代码：debugger;

在项目根目录下面运行命令：node-nightly --inspect ./node_modules/webpack/bin/webpack.js 命令的参数含义，可以查看该链接：https://nodejs.org/en/docs/inspector

然后再浏览器中打开：chrome://inspect 这个链接， 稍等一会儿，即可看到对应的调试链接

image.png

点击最下面的 inspect 链接按钮， 即可跳转到对应的调试界面

image.png

本章源码地址