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

您应该启用源映射以获得良好的调试体验。 Source map 将 link 您的包与您自己的代码，因此当发生错误时，错误消息将输出您的文件的行号，而不是包的行号。默认情况下，source map 在 webpack 中是禁用的，可以通过属性 'devtool' 像这样启用：

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

Answer 2

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

    // webpack.config.js
    module.exports = {
      ...
      devtool: 'inline-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.config.js
module.exports = {
    ...
    devtool: '#eval-source-map',
    ...
};

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

Console logging error on bundle.js instead of React component