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

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实现相同的结果？

编辑:
谷歌浏览器中的相关问题: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）往往能够最好地处理源映射。虽然目前所有主流浏览器都支持它们，但我在 Firefox 上的体验最糟糕。

我们有非常非常大的包，并且源映射并没有导致开发工具出现任何缓慢。您使用哪种模式？对于 webpack，使用“eval”将执行映射文件的内联源映射，但不是源（因此您会看到生成的代码，但与原始文件 1:1 相关）。由于许多 ES6、Typescript 和 Coffeescript 结构不能很好地映射（例如：生成器或推导式），因此这通常是最容易使用的模式，也是最快的。使用 eval 还可以确保它在 Chrome 开发工具中“正常工作”，而无需开发人员执行任何操作（您的文件将位于 webpack:// 伪文件夹下）

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