javascript - 如何高效调试 webpack 应用？

Question

我正在尝试在我的项目中采用 webpack 开发服务器。我知道它被广泛采用，所以令我惊讶的是调试应用程序似乎非常困难。由于 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 实现相同的结果？

编辑:
谷歌浏览器中的相关问题:https://code.google.com/p/chromium/issues/detail?id=376409

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

Answer 1

您使用哪些开发工具？ Millage 可能会有所不同，但 Chrome(和 IE/Edge，是的......IE 和 Edge)倾向于最好地处理 sourcemaps。虽然此时所有主流浏览器都支持它们，但我在 Firefox 上的体验更差。

我们有非常非常大的包，而且 sourcemaps 没有导致 devtools 的任何缓慢。您使用哪种模式？对于 webpack，使用“eval”将做一个映射文件的内联源映射，而不是源(所以你看到生成的代码，但与原始文件 1:1 相关)。由于许多 ES6、Typescript 和 Coffeescript 构造不能很好地映射(例如:生成器或理解)，这通常是最容易使用的模式，也是最快的。使用 eval 还可以确保它在 Chrome devtools 中“正常工作”，无需开发人员采取任何行动(您的文件将位于 webpack://伪文件夹下)

对于堆栈跟踪，我不知道它是特定于浏览器还是什么。我们使用 Mocha 进行单元测试，它看起来并没有为 sourcemaps 做任何特殊的事情，它捕获堆栈跟踪以将它们正确地呈现在测试运行器的 webpack 上(它甚至包括 webpack://前缀和原始文件名和正确的行号)，所以也许对该库的需求是特定于浏览器或已过时的？