在bundle.js而不是React組件上的控制檯日誌記錄錯誤

Question

我已經創建了一個適用於我的Webpack構建 - 它有一個用於熱重裝的開發服務器和一個運行模板html的生產快速服務器文件並集成bundle.js文件。

這是所有偉大的，當我在我的dev的服務器正在工作除了，控制檯給我的錯誤信息是這樣的：

Uncaught Error: Expected the reducer to be a function.(…) bundle.js:36329

它引用bundle.js爲錯誤的來源，而不是我正在工作的組件，這使得很難追查錯誤的來源。

我知道，只要控制檯知道它是包含錯誤的bundle.js文件，但是如何讓控制檯記錄預包裝代碼？ （例如Component.js）

在此先感謝。

Answer 1

您應該啓用源映射以獲得良好的調試體驗。源代碼映射會將您的包與您自己的代碼關聯起來，因此當發生錯誤時，錯誤消息將輸出文件的行號，而不是捆綁包。默認情況下，源地圖是用的WebPack禁用，可像這樣的財產「devtool」啓用：

// webpack.config.js 
module.exports = { 
    ... 
    devtool: '#eval-source-map', 
    ... 
}; 

這裏的鏈接官方文檔： https://webpack.github.io/docs/configuration.html#devtool