为什么要写这篇文章呢？
因为这个玩意儿我折腾了半天才整出来的，不发个文章太对不起我的折腾了 -_-
因为最近在学webapack，已经把整个webpack的配置、启动速度优化&构建优化都搞清楚弄明白了一波，之后我发现单单走配置好像没那么有挑战于是plugin引起了我的兴趣便想要尝试着写一些自定义plugin，通过看一些相关文章了解了compiler、compilation具体的作用，我的第一个plugin是想要写一个能够在打包结束输出整个dist文件夹内所有文件的名称以及大小的md文件的。当我开始写的时候我需要通过compilation.assets拿到打包之后的关于资源的一些信息，但我又发现我好像并不知道 compilation.assets内有哪些东西，然后我就开始翻文档结果翻了半天并没有找到关于compilation.assets内有哪些属性以及它们的作用，无奈之下我只好自己通过debug的方式去看，于是就有了这一篇文章。
如何debug webapck？
起先我翻了一波文档直接搜索debug就会出现如下关键词
点开跳转到Debugging里下面有这么一段话：
文档上说需要:
- 通过
node --inspect来调用webpack； - 推荐
node --inspect-brk可以开启webpack的构建同时会在第一行代码处开启debugger； - 如果你要配置多个你想要debugger的文件可以通过在
--config之后配置文件路径 - 在想要debug的文件开头输入
debugger，在后面的启动之后直接跳过webpack构建debug进入我们想要debug的文件即可；
在这里我配置的是：
"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./build/webpack.prod.js"
之后启动npm run xxx启动你所配置的script看到下面这段命令就说明运行成功了~~
紧接着打开chrome浏览器按下F12看到这么一个标志：
最后点开稍缓两秒钟就能进入到最紧张刺激的debug环节了！！！
但我发现如果通过浏览器每次我都要启动命令，开启浏览器点开node active的标志这样岂不是很繁琐，于是我就想能不能直接在vscode里调试呢？
ok，作为程序员的我就喜欢折腾，然后我就~
- 打开了vscode 运行与调试；
- 创建了一个launch.json文件；
- 选择
Node.js扩展；
默认创建的是这么个文件，但是配置完之后点击运行并不能启动webpack的调试，但我们可以通过配置npm script的方式启动调试过程
点击添加配置选择 通过npm启动就会出现这个配置项，我们只需要将runtimeArgs和runtimeExecutable配置成我们自己的npm script即可；
接下来选择我们自己的配置项
之后运行，就能在vscode里调试webpack了(ง •̀_•́)ง
最后，我是夜语感谢大家的收看！
