debugger调试监听webpack配置文件的代码

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 配置文件中的代码情况了。

关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；