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



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

如果没有标签加载,告诉浏览器运行index.js代码是什么?

这个链接(Create React App应用程序中index.html和index.js之间的连接在哪里?(说:

我们的配置指定Webpack使用src/index.js作为"入口点"。因此,这是它读取的第一个模块,然后从它转到其他模块,将它们编译成一个捆绑包。

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

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

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

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

这个脚本标记是浏览器知道加载什么的方式。

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

在幕后,Create React应用程序使用带有html Webpack插件的Webpack。

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

我们的配置指定Webpack使用src/index.js作为"入口点"。因此,这是它读取的第一个模块,然后从它转到其他模块,将它们编译成一个捆绑包。

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

我们已经启用了html webpack插件来生成html文件。在我们的配置中,我们指定它应该读取public/index.html作为模板。我们还将inject选项设置为true。有了这个选项,html webpack插件会在最终的html页面中添加一个带有webpack提供的路径的。最后一个页面是在运行npm-run-build之后在build/index.html中获得的页面,也是在运行npm start时从/获得的页面。

这是我的理解,我希望这能有所帮助。

最新更新