【webpack 插件开发】如何调试 webpack 打包时候的代码？

介绍

在进行前端工程的开发时，一般情况需要使用 webpack 打包工程。本文简单记录一下如果调试 webpack 打包时候的代码，免得下次还需要再去搜索。

方法1 使用 vscode + npm 插件

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

然后，在程序中想要打断点的地方打上断点。 例如想要看一下，url-loader 在打包时候的运行过程， 可以在 node_modules\url-loader\dist\index.js 文件中对应位置打上断点，然后再 NPM SCRIPTS 面板对应命令上点击 debug 按钮，就可以让程序停止再断点处，非常方便调试。