面试题：Webpack 自定义插件深度调试技巧

1. 在 Webpack 构建流程中插入断点进行调试

使用 debugger 语句：
- 在自定义插件的特定钩子函数代码中直接插入 debugger 语句。例如，假设插件中有一个 apply 方法，在某个钩子函数处理逻辑中插入：
```
class MyPlugin {
  apply(compiler) {
    compiler.hooks.someHook.tap('MyPlugin', (compilation) => {
      debugger;
      // 你的逻辑代码
    });
  }
}
```
- 运行 Webpack 构建时，当执行到 debugger 语句，会暂停在该位置。如果你使用的是 Chrome 浏览器，可以打开开发者工具，在“Sources”标签页中找到 Webpack 构建相关的脚本，就可以查看当前的变量值、调用栈等信息，方便定位问题。
使用 webpack - --inspect：
- 以调试模式运行 Webpack。在命令行中执行 webpack --inspect 或 webpack - -inspect - -watch（如果需要监听文件变化）。
- 这会启动一个调试会话，并输出类似 Debugger listening on ws://127.0.0.1:9229/xxxxxxx 的信息。
- 然后可以使用支持远程调试的工具，如 Chrome 浏览器，打开 chrome://inspect，点击“Open dedicated DevTools for Node”，就可以连接到正在运行的 Webpack 进程，在自定义插件代码中设置断点进行调试。

2. 分析插件执行时的上下文信息来找出错误根源

打印上下文信息：
- 在钩子函数中，通过 console.log 打印关键的上下文对象属性。例如，在 compilation 钩子中，可以打印 compilation 对象的一些属性：
```
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
  console.log('Compilation assets:', compilation.assets);
  console.log('Compilation modules:', compilation.modules);
  // 打印其他相关属性
});
```
- 这样可以了解在插件执行时，Webpack 内部的状态，比如当前有哪些资源（assets）、模块（modules）等，有助于发现数据是否符合预期。

使用 compiler.hooks.invalid 和 compiler.hooks.done：

compiler.hooks.invalid 钩子在文件系统变化，Webpack 即将重新构建时触发。可以在这个钩子中记录当前构建的一些状态信息。

compiler.hooks.invalid.tap('MyPlugin', (filename) => {
  console.log('Build is about to start due to change in file:', filename);
  // 记录更多状态信息
});

compiler.hooks.done 钩子在构建完成时触发。可以在此处分析构建结果，比如是否有错误、输出文件的相关信息等。

compiler.hooks.done.tap('MyPlugin', (stats) => {
  if (stats.hasErrors()) {
    console.log('Build failed with errors:', stats.compilation.errors);
  } else {
    console.log('Build completed successfully');
  }
});

使用日志库：

引入一个日志库，如 debug。在插件中配置并使用它：

const debug = require('debug')('my - webpack - plugin');
class MyPlugin {
  apply(compiler) {
    compiler.hooks.someHook.tap('MyPlugin', (compilation) => {
      debug('Some hook is called with compilation:', compilation);
      // 其他逻辑
    });
  }
}

通过设置环境变量 DEBUG=my - webpack - plugin，可以在命令行中看到详细的调试日志，方便分析插件执行过程。

面试题：Webpack 自定义插件深度调试技巧

知识考点

面试题答案

1. 在 Webpack 构建流程中插入断点进行调试

2. 分析插件执行时的上下文信息来找出错误根源