当我在 Chrome 中的 React 应用程序中获取资源时，我看到了我的文件 - JavaScript

最近在开发 React 应用时，我遇到了一个问题：我在 Chrome 中获取资源时，发现我的 JavaScript 文件有所消失。经过不断调试，我发现了其中的原因，并且在这里分享给大家。

问题描述

当我在 Chrome 开发者工具中打开 React 应用程序时，我注意到我的 JavaScript 文件似乎消失了。因此，我无法查看代码和进行调试。我的目录结构如下所示：

- src
  - index.js
  - App.js
  - components
    -Button.js

实际上，我可以在 JavaScript 文件夹中看到我的文件，但是它们并没有在 Chrome 开发者工具中显示。

解决方案

我发现这是因为在默认的情况下，React 应用程序使用了 Webpack，而 Webpack 许多功能都是基于模块化的概念。默认情况下，Webpack 将我的 JavaScript 文件捆绑成一个压缩文件，并在执行时加载它们。

因此，当我在 Chrome 中查看资源时，我只能看到一个名为“bundle.js”的文件。通过查看此文件，我可以看到所有的 JavaScript 代码。

为了解决这个问题，我需要通过调整 Webpack 配置来控制打包行为。具体来说，我需要打开 Webpack 配置文件，并将以下行添加到其中：

{
  // ...
  devtool: 'inline-source-map',
}

这将生成一个新的 JavaScript 文件，其中包含了所有我的代码，而且还可以在 Chrome 开发者工具中查看我的源代码。此外，我还可以进行断点调试和单步执行代码。

最后，我的目录结构如下所示：

- src
  - index.js
  - App.js
  - components
    -Button.js
- dist
  - bundle.js
  - main.js.map

结论

当你在 Chrome 中调试 React 应用程序时，如果发现自己无法查看 JavaScript 文件，则需要检查 Webpack 配置文件是否正确设置。为了让开发更容易，可以考虑使用一个打包工具，例如 webpack 或者 babel，以实现模块化的开发方式。