React 应用程序如何在没有明确引用其 JS 实现文件的情况下启动？

Question

我正在学习 React。在井字游戏（https://reactjs.org/tutorial/tutorial.html）中，index.html 文件有一些事件处理程序和一个指向 id=root 的 div。但没有任何关于 index.js 文件的信息，它有一个 ReactDOM.render。

如果没有标签加载它，什么告诉浏览器运行 index.js 代码？

这个链接（Where's the connection between index.html and index.js in a Create-React-App application?）说：

我们的配置指定 Webpack 使用 src/index.js 作为“入口点”。所以这是它读取的第一个模块，然后从它到其他模块以将它们编译成一个单独的包。

当 webpack 编译资产时，它会生成一个（或者如果您使用代码拆分，则可以生成多个）捆绑包。它使它们的最终路径可用于所有插件。我们正在使用一个这样的插件将脚本注入 HTML。

但如果这是答案，那么为什么浏览器应该知道 webpack，尤其是在最小的 index.html 文件中没有提到这一点？

Answer 1

create-react-app 构建脚本告诉 webpack 创建包，从 src/index.js 作为入口点开始。此构建脚本的一部分也是创建 index.html 文件的修改版本，该文件指向新创建的捆绑文件。您可以在/build 目录中找到修改后的 index.html 文件，它将获得如下内容：

<script src="/static/js/main.379f1d19.chunk.js"></script>

该脚本标签是浏览器知道要加载什么的方式。

Answer 2

尝试运行 npm run build。 上面答案中讨论的 index.html 文件位于 webpack 运行该命令后生成的构建目录中。

在底层，Create React App 使用带有 html-webpack-plugin 的 Webpack。

此插件将使用public 目录中的 index.html 作为模板生成 index.html 文件

我们的配置指定 Webpack 使用 src/index.js 作为“入口点”。所以这是它读取的第一个模块，然后从它到其他模块以将它们编译成一个单独的包。

当运行 npm run build webpack 从 index.js 开始时，每次导入时都会将该模块包含在一个脚本中，该脚本将被注入到上面生成的 index.html 中，如下面您共享的答案中所述

我们已启用 html-webpack-plugin 来生成 HTML 文件。在我们的配置中，我们指定它应该读取 public/index.html 作为模板。我们还将注入选项设置为 true。使用该选项，html-webpack-plugin 将 Webpack 提供的路径添加到最终的 HTML 页面中。最后一页是您在运行 npm run build 后在 build/index.html 中获得的页面，以及在您运行 npm start 时从 / 获得的页面。

这是我的理解，希望对您有所帮助。