Question

我正在尝试在我的项目中采用webpack dev服务器。我知道它被广泛采用，所以让我感到惊讶的是调试应用程序似乎很难。由于webpack默认生成一个巨型包，因此源映射是必须的。我有一个很大的问题：

取决于devtool模式，源映射要么很难解析（eval），要么不用于映射某些堆栈跟踪（eval-source-map），例如有时整个堆栈跟踪看起来像这样：
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67)。
此外，当您手动调用console.trace或console.error时，不会映射输出。所以你必须使用像sourcemapped-stacktrace这样的工具 - 这既缓慢又容易出错。

目前我使用require.js进行开发，因为它允许我非常轻松地调试应用程序 - 每个堆栈跟踪指向正确的文件和行。

如何使用webpack实现相同的结果？

编辑：
Google Chrome中的相关问题：https://code.google.com/p/chromium/issues/detail?id=376409

firefox中的相关问题： https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Answer 1

你使用哪种devtools？ Millage可能会有所不同，但Chrome（和IE / Edge，是的...... IE和Edge）倾向于最好地处理源图。虽然目前所有主流浏览器都支持它们，但我对Firefox的体验更糟糕。

我们拥有非常大的捆绑包，而源图也没有在devtools中造成任何缓慢。你使用的是哪种模式？对于webpack，使用“eval”将执行映射文件但不是源的内联源映射（因此您可以看到生成的代码，但与原始文件的比例为1：1）。由于很多ES6，Typescript和Coffeescript构造都没有很好地映射（例如：生成器或理解），这通常是最简单的模式，也是最快的。使用eval可以确保它在Chrome开发工具中“正常工作”而无需开发人员的任何操作（您的文件将位于webpack：//伪文件夹下）

对于堆栈跟踪，我不知道它是特定于浏览器还是什么。我们使用Mocha进行单元测试，它看起来不像是对源图做了什么特别的事情，它捕获堆栈跟踪以正确地在测试运行器的webpack上呈现它们（它甚至包括webpack：//前缀以及原始文件名）和适当的行号），那么该库的需求可能是浏览器特定的还是过时的？

Answer 2

我发现添加一个启动webpack的npm run watch任务非常有用：

webpack -w --devtool eval

这会导致源映射至少具有正确的模块名称。虽然源映射源是某种处理（babel），但有点令人困惑？所以你会在源代码中看到：

import react from 'react';

但是实际的变量名称会被类似于_react2或类似名称。我喜欢映射源是带有丑陋变量名的已处理版本，或者是对于范围具有映射源中所见的定义。

我package.json执行上述任务的实际行是：

  "scripts": {
    // other lines edited out
    "watch": "node ./node_modules/webpack/bin/webpack.js -w --devtool eval"
  }

如何有效地调试webpack应用程序？

2 个答案: