您应该启用源Map以获得良好的调试体验。源Map会将您的包与您自己的代码链接起来，以便在发生错误时，错误消息将输出文件的行号，而不是包。默认情况下，源Map在webpack中禁用，但可以使用属性“devtool”启用，如下所示：

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

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

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

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

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

• • 更简单的方法是：**

转到开发工具-〉开发工具设置-〉选择"首选项"选项卡-〉选中复选框-"启用JavaScript源代码Map"
希望这个有用。

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

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

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

对于使用craco的用户，
您可以通过以下方式实现此目标：

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