React中index.html与src下JS文件的关联及启动报错问题

为什么public/index.html没加script标签也能关联src里的JS文件？ #

这是因为你用的Create React App（CRA）底层依赖webpack和html-webpack-plugin，它们帮你自动完成了关联工作：

• webpack会把src目录下的入口文件（默认是src/index.js）以及它依赖的所有模块打包成一个或多个bundle文件
• html-webpack-plugin会自动把打包好的bundle文件对应的<script>标签注入到public/index.html里
• 你在浏览器里查看页面源码时，能看到自动添加的script标签，但本地的index.html源码里不会显式写出来——这都是构建工具在开发/打包过程中自动处理的。

删除src所有文件新建a.js后，npm start报错找不到index.js的原因？ #

CRA默认的webpack配置里，把src/index.js硬编码成了项目的入口文件。当你删掉原来的index.js，只新建a.js时，webpack找不到配置里指定的入口文件，就会抛出这个错误。

解决方法有两种：

1. 最简单的：把你的a.js改名为index.js，让webpack能找到默认入口
2. 自定义入口：如果你不想用index.js当入口，需要修改webpack配置。但CRA默认隐藏了配置文件，你可以：
   • 执行npm run eject把配置文件暴露出来，然后在config/webpack.config.js里修改entry字段指向你的a.js
   • 或者用react-app-rewired这类工具，不用eject就能覆盖默认配置，修改入口路径

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