以下是本节正文:
1.浏览器调试
- 在node环境执行以下命令,会生成一个服务地址
node --inspect-brk ./node_modules/webpack-cli/bin/cli.js
- 浏览器打开服务地址,在调试面板点击node的icon
- node命令面板按回车,浏览器就会进入调试代码的界面
- 开始调试
2.vscode调试
- 打开
允许和调试
界面(如图,左侧高亮部分) - 点击下拉,选择
添加配置
- 选择
Node.js
进入launch.json
配置页面
- 根据下图配置,每一项都有相关配置的说明
- 选择上一步编辑完的配置,点击三角形开始运行。这时候,源码里有
debugger
就会停下来
3.通过compiler.run()
调试
- 写一个
debugger.js
文件,手动去调用webpack的compiler.run()
方法,也就是手动开启webpack编译。同时在该文件的compiler.run()
之前debugger
// debugger.js
const webpack = require('webpack');
const webpackOptions = require('./webpack.config');
// compiler代表整个编译过程
const compiler = webpack(webpackOptions);
// 调用run方法,可以启动编译
debugger
compiler.run((err, stats) => {
console.log(err)
console.log(stats.toJson({
files: true, // 为true就表示打印 产出哪些文件
assets: true, // 为true就表示打印 生成哪些资源
chunk: true, // 为true就表示打印 生成哪些代码块
module: true, // 为true就表示打印 模块信息
entries: true // 为true就表示打印 入口信息
}))
})
- 如图选择
Node.js
- 选择
Run Current File
- 点击三角形开始执行,遇到
debugger.js
中的debugger
会停下来,即开始调试了。