如何高效地調試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

你使用哪種devtools？ Millage可能會有所不同，但Chrome（和IE/Edge，是... IE和Edge）傾向於處理源地圖最好的。雖然目前所有的主流瀏覽器都支持它們，但我對Firefox的使用體驗不佳。

我們有非常大的包和源地圖並沒有導致devtools緩慢。你使用哪種模式？對於webpack，使用「eval」將執行映射文件的內聯源代碼映射，但不包含源代碼（因此您可以看到生成的代碼，但與原始文件1：1相關）。由於很多ES6，Typescript和Coffeescript構造不能很好地映射（例如：生成器或理解），所以這通常是最簡單的模式，也是最快的。使用eval還確保它在Chrome開發工具中「正常工作」，而不需要開發人員採取任何行動（您的文件將位於webpack：//僞文件夾下）

對於堆棧跟蹤，我不知道它是否是瀏覽器具體還是什麼。我們使用Mocha進行單元測試，它看起來並沒有對源代碼做任何特殊處理，它捕獲堆棧跟蹤以便正確地在測試運行器的webpack上呈現它們（它甚至包括webpack：//前綴以及原始文件名和適當的行號），所以也許該圖書館的需求是瀏覽器特定的或過時的？

Answer 2

我發現它有用添加一個npm run watch任務揭開序幕的WebPack像這樣：

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" 
    }