介绍
在进行前端工程的开发时，一般情况需要使用 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 按钮，就可以让程序停止再断点处，非常方便调试。
使用 chrome 浏览器调试
参考博客：http://www.ruanyifeng.com/blog/2018/03/node-debugger.html
首先再想要调试的地方添加代码： debugger;
在项目根目录下面运行命令： node --inspect-brk .\node_modules\webpack\bin\webpack.js node 命令的参数含义，可以查看该链接：https://nodejs.org/en/docs/inspector
然后再浏览器中打开：chrome://inspect 这个链接， 稍等一会儿，即可看到对应的调试链接
点击最下面的 inspect 链接按钮， 即可跳转到对应的调试界面
小结
通过上面的两种方式可以方便的调试代码，为后续开发 webpack 插件和 loader 做一个的准备。