面试题：Webpack 自定义插件调试之基础方法

Question

请简述在 Webpack 自定义插件开发中，常用的调试方法有哪些？比如如何在插件代码中输出调试信息，以及怎样利用浏览器开发者工具辅助调试。

Answer 1

输出调试信息

1. console.log：在插件的apply方法及相关函数中，直接使用console.log输出关键变量、流程信息等。例如：

class MyPlugin {
    apply(compiler) {
        console.log('MyPlugin is applying...');
        compiler.hooks.compile.tap('MyPlugin', compilation => {
            console.log('Compilation started:', compilation);
        });
    }
}

2. 使用专门的日志库：如debug库，它允许你为不同的模块定义不同的日志级别和命名空间。首先安装debug：npm install debug --save-dev。然后在插件中使用：

const debug = require('debug')('my-plugin');
class MyPlugin {
    apply(compiler) {
        debug('MyPlugin is applying...');
        compiler.hooks.compile.tap('MyPlugin', compilation => {
            debug('Compilation started:', compilation);
        });
    }
}

利用浏览器开发者工具辅助调试

1. 在插件中添加 debugger 语句：在插件代码的关键位置添加debugger语句，当 Webpack 运行到该位置时，如果开启了调试模式，会在浏览器开发者工具的调试器中暂停。例如：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.emit.tap('MyPlugin', (compilation) => {
            debugger;
            // 这里可以检查 compilation 对象等
        });
    }
}

然后运行 Webpack 构建时，在命令行中添加--inspect标志，例如：npx webpack --config webpack.config.js --inspect。接着在 Chrome 浏览器中访问chrome://inspect，找到对应的 Node.js 进程并打开调试器，当执行到debugger语句时，调试器会暂停，你可以查看变量、调用栈等信息。 2. 通过 source map：确保 Webpack 配置中开启了 source map，例如：

module.exports = {
    //...
    devtool: 'eval-source-map',
};

这样在浏览器开发者工具中调试时，能更清晰地定位到插件源代码中的具体位置，而不是经过编译后的代码位置，方便理解和调试逻辑。