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

Question

我创建了一个 Webpack 版本，它对我来说工作正常——它有一个开发服务器，我用它来热重载，还有一个运行模板 html 文件并集成bundle.js文件的生产快速服务器。

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

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

Answer 2

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

添加它会在控制台中记录错误，其中包含源中的实际组件名称和行号。 但这允许用户查看代码？

Answer 3

对于 webpack 6.0.1。 我应用以下内容登录浏览器控制台：

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

要在生产模式下消除大量日志记录并减少包大小，您可以使用“cheap-module-source-map”：

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

Answer 4

如果你使用的是最新的 webpack ie v4，你需要写这个

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

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

Answer 5

对于使用craco的人，

您可以通过以下方式实现：

module.exports = {
    webpack: {
        configure: {
            // must be updated later for production optimization
            devtool: 'eval-source-map',
        },
    }
}

Answer 6

一个更简单的方法是：

转到开发工具 -> 开发工具设置 -> select“首选项”选项卡 -> select 复选框 -“启用 JavaScript 源映射”

希望这可以帮助。