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

【问题标题】：Console logging error on bundle.js instead of React componentbundle.js 而不是 React 组件上的控制台日志记录错误
【发布时间】：2017-03-26 04:33:18
【问题描述】：

我创建了一个适合我的 Webpack 构建 - 它有一个用于热重载的开发服务器和一个运行模板 html 文件并集成 bundle.js 文件的生产快速服务器。

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

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

它将bundle.js 引用为错误源，而不是我正在使用的组件，这使得追踪错误源非常困难。

据控制台所知，我知道包含错误的是 bundle.js 文件，但我怎样才能让控制台记录预捆绑代码？（例如Component.js）

提前致谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

对于 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',
  ...
}

【讨论】：

【解决方案3】：

如果您使用的是最新的 webpack，即 v4，则需要编写此代码

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

【讨论】：

设置 mode: "development" 和 devtool: 'inline-source-map' 或 devtool: 'source-map' 对我不起作用 - 错误仍然引用 bundle.js 中极长的行，这些行被高度最小化和混淆，我无法理解（使用 webpack 5.61.0）。
更新：作为参考，如果它对其他人有帮助，我使用的是UglifyJS Webpack Plugin - 当我在该插件配置中启用sourceMap: true 时，我可以在 chrome 开发工具中看到源映射。解决方案的灵感来自这个答案：stackoverflow.com/a/41889062

【解决方案4】：

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

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

【讨论】：