使用 Ruby on Rails、 Webpack 和 React JS 在 Chrome 中将源地图一行删除

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

当我使用 eval-source-map时,没有问题。使用 inline-source-map会导致行号被抛出一个。

检查不是 React 组件的 JavaScript 仍然存在这个问题,所以我不认为这与 jsx 的使用有关。

3351 次浏览

There was a bug in chrome, try the latest version, also on your webpack config try using different sourcemaps on devtool try all of these to see if one works for inline source map:

  • inline-source-map

  • cheap-inline-source-map

for other different configs:

  • cheap-source-map

  • cheap-module-source-map

  • cheap-module-eval-source-map

on webpack config:

{


...


devtool:'source-map'


...


}

Configuring with devtool: 'inline-module-source-map' into webpack fixed my issues.