bundle.js而不是React组件上的控制台日志记录错误

Question

我已经创建了一个对我来说很好的Webpack构建——它有一个用于热重新加载的dev服务器，还有一个运行模板html文件并集成包的production express服务器。js文件。

这一切都很好，但当我在我的开发服务器上工作时，控制台会给我如下错误消息：

Uncaught Error:预期减速机是一个函数。（…）捆。js:36329

它引用了bundle。js是错误的来源，而不是我正在使用的组件，这使得很难追踪错误的来源。

据控制台所知，我知道它是捆绑包。js包含错误的文件，但如何让控制台记录预绑定代码？（例如，Component.js）

提前感谢。

Answer 1

如果你使用的是最新的网页包，也就是v4，你需要写下这个

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

更新文档：https://webpack.js.org/guides/development/#using-source-maps

Answer 2

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

添加此项会使用源中的实际组件名称和行号记录控制台中的错误。但这允许用户查看代码？

Answer 3

您应该启用源映射以获得出色的调试体验。源代码映射会将您的捆绑包与您自己的代码链接起来，因此当发生错误时，错误消息将输出文件的行号，而不是捆绑包。默认情况下，源代码映射被webpack禁用，并且可以使用属性“devtools”启用，如下所示：

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

以下是官方文件的链接：https://webpack.github.io/docs/configuration.html#devtool