我正在使用node --inspect
和Chrome DevTools调试Webpack构建。
我看到我的输出文件包含一段带有注释/* WEBPACK VAR INJECTION */
的代码。如果我在生成该注释的Webpack代码上放置一个断点,那么在调试模式下运行构建时调试器不会停在该断点处,但是当我放置debugger;
时它会停止。为什么呢?
修改
我所指的代码(最后一个版本)可以在中看到 https://github.com/webpack/webpack/blob/master/lib/NormalModule.js
这里我粘贴一个提取物。我希望调试器在我放在这个函数中的任何断点处停止(除了传递给.map
和.forEach
的函数之外的地方)。 (这是Webpack中写入/* WEBPACK VAR INJECTION */
)的唯一代码:
function doBlock(block) {
console.log("1 What the F*** is going on with this debugger?");
block.dependencies.forEach(doDep);
block.blocks.forEach(doBlock);
if(block.variables.length > 0) {
var vars = [];
block.variables.forEach(doVariable.bind(null, vars));
var varNames = [];
var varExpressions = [];
var varStartCode = "";
var varEndCode = "";
function emitFunction() {
console.log("2 Why the F*** is it that a breakpoint right here doesn't stop the debugger?");
if(varNames.length === 0) return;
varStartCode += "/* WEBPACK VAR INJECTION */(function(" + varNames.join(", ") + ") {";
// exports === this in the topLevelBlock, but exports do compress better...
varEndCode = (topLevelBlock === block ? "}.call(exports, " : "}.call(this, ") +
varExpressions.map(function(e) {
return e.source();
}).join(", ") + "))" + varEndCode;
varNames.length = 0;
varExpressions.length = 0;
}
vars.forEach(function(v) {
if(varNames.indexOf(v.name) >= 0) emitFunction();
varNames.push(v.name);
varExpressions.push(v.expression);
});
emitFunction();
console.log("3 Are you not gonna stop here, debugger? Are you F****** kidding me?");
var start = block.range ? block.range[0] : 0;
var end = block.range ? block.range[1] : _source.size();
if(varStartCode) source.insert(start + 0.5, varStartCode);
if(varEndCode) source.insert(end + 0.5, "\n/* WEBPACK VAR INJECTION */" + varEndCode);
}
}