React中index.js文件如何关联到HTML文件？面试技术疑问

嘿，这个问题真的挺容易让人懵的——毕竟打开public文件夹里的index.html，确实看不到任何指向src/index.js的<script>标签，对吧？我来给你捋清楚背后的逻辑：

首先，create-react-app（简称CRA）是用构建工具（早期是Webpack，现在新版已经换成Vite了）来帮我们处理资源打包和注入的，完全不需要手动写脚本引用。

核心原理：模板文件 + 自动注入 #

你看到的public/index.html其实是一个模板文件，它的作用是给最终生成的HTML提供基础结构：

• 里面的<div id="root"></div>是React应用的挂载目标，src/index.js里的ReactDOM.createRoot(document.getElementById('root')).render(<App />)就是冲着这个节点来的。
• 构建工具会在编译过程中，自动把打包好的JS、CSS资源注入到这个模板里，生成最终在浏览器中运行的HTML文件。

具体流程拆解 #

1. 入口文件指定：CRA的配置里已经把src/index.js设为整个应用的入口，构建工具会从这里出发，把所有依赖的组件、样式、第三方库等打包成一个或多个优化后的JS文件（比如main.xxx.js，后缀的哈希值是用来做缓存优化的）。
2. 自动注入资源：当你运行npm start（开发模式）或者npm run build（生产构建）时，构建工具会自动修改模板，在HTML的<body>末尾添加<script>标签引入打包后的JS文件，同时处理CSS资源（要么注入到HTML里，要么生成单独的CSS文件并添加<link>标签）。
3. 浏览器运行时验证：打开浏览器查看页面源代码（注意是浏览器的“查看页面源代码”，不是项目里的源码文件），你就能看到这些自动添加的标签了，比如：

   <script src="/static/js/main.fd32a789.js"></script>
   <link href="/static/css/main.073c9b0a.css" rel="stylesheet">
   

简单来说，CRA把手动管理资源引用的工作都交给构建工具了，所以你在源码的index.html里看不到这些链接，但它们在构建后会自动出现，让index.js的代码能在浏览器里运行，进而把React应用挂载到页面上。

内容的提问来源于stack exchange，提问作者J Seabolt