webpack调试对插件开发有很大帮助

1、指令配置

主要用到node的inspect参数指令，在package.json中配置debug指令

  1. {
  2.   "scripts": {
  3.     "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js"
  4.   },
  5. }

—inspect：开启node的调试工具
—inspect-brk：在webpack命令执行的时候第一行打上断点

2、调试

允许npm run debug，命令行出现下面图中所示，代表调试开启了
image.png
接着打开浏览器的控制台，点击绿色的小图标
image.png
会自动跳转到webpack的打包源码
image.png
通过右上角的按钮，可以进入到我们插件的断点（debugger）
image.png