21.重学webpack——三种webpack调试模式

【重学webpack系列——webpack5.0】

1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。
从16节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。
可以点击上方专栏订阅哦。

以下是本节正文：

---

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会停下来，即开始调试了。