javascript - Chrome 中的 Sourcemaps 与 Ruby on Rails、Webpack 和 React JS 相去甚远

Question

当我使用 Chrome devtools 调试器时，我遇到了一个问题，即 Webpack 使用 inline-source-map 配置设置生成的源映射偏离一行。Webpack 在 Ruby on Rails 应用程序中设置，以生成由几十个模块组成的串联的、未缩小的 JavaScript 文件。这些模块中的大部分都是 ReactJS 组件，并由 jsx 加载器解析。然后，Webpack 的输出与 gems 生成的一些其他 JavaScript 库一起包含在 application.js 文件中。

当我使用eval-source-map时，没有问题。关于使用 inline-source-map 的一些事情导致行号被一个丢弃。

检查非React组件的JavaScript还是有这个问题，所以我认为这与使用jsx无关。

Answer 1

chrome 中有一个错误，尝试最新版本，也在你的 webpack 配置上尝试在 devtool 上使用不同的源映射尝试所有这些以查看是否有一个适用于内联源映射:

• 内联源映射

• 廉价内联源 map

对于其他不同的配置:

• 廉价资源 map

• 廉价模块源映射

• 廉价模块评估源映射

在 webpack 配置上:

{

...

devtool:'source-map'

...

}