在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