1.在 package.json 文件中中添加调试 webpack 配置文件的代码。
"scripts": {
"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config ./webpack.dev.config.js",
}
【node】：通过node启动 。
【inspect】：调试模式。
【brk】：在首行打一个断点，调试代码会在首行停住。
【./node_modules/webpack/bin/webpack.js】：调试对象及其路径。
【./webpack.dev.config.js】：启动这个配置文件。
2.在 webpack 配置文件【./webpack.dev.config.js】中加入 debugger 断点。
图1
3.在终端运行：npm run debug
4.在谷歌浏览器页面上按F12打开浏览器的控制台。
图2
如图所示的控制台的左上角有一个绿色按钮，点击一下绿色按钮就会自动打开一个DevTools - Node.js 的新控制台，并进入 webpack 文件的断点。
图3
放开 webpack 文件的断点之后，就进入了我们自定义的 webpack 的配置文件【./webpack.dev.config.js】中的断点上了。
图4
这个就可以监听 webpack 配置文件中的代码情况了。
