当前位置: 首页 > 面试题库 >

在Create-React-App应用程序中index.html和index.js之间的连接在哪里?

葛修永
2023-03-14
问题内容

我开始玩Create React App,但我不明白内如何index.js加载index.html。html代码是这样的:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

但是我看不到任何地方的进口index.js。连接在哪里?我想念的是什么?


问题答案:

在幕后,Create React App使用带html-webpack-
plugin的Webpack

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

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

我们已启用html-webpack-plugin生成HTML文件。在我们的配置中,我们指定应将其public/index.html作为模板阅读。我们还将inject
选项设置为true。使用该选项,html-webpack- plugin<script>带有Webpack提供的路径的a添加到最终HTML页面中。这最后一个页面是一个你在得到build/index.html运行后npm run build,这会从服务的一个/运行时npm start

希望这可以帮助!Create React App的优点在于您实际上不需要考虑它。



 类似资料:
  • react-create-app如何与WebPack一起工作?在的默认安装中,webpack配置文件位于何处?在项目文件夹中找不到配置文件。 我没有创建覆盖配置文件。我可以用其他文章管理配置设置,但我想找到常规的配置文件。

  • 在CRA使用网络字体有问题,在开发模式下它是这样加载的 字体已加载 但是当部署时,在生产模式下,它似乎根本没有加载。伙计们,有什么想法吗?这是我的css。

  • 我有一个使用CreateReact应用程序的reactJs应用程序。该应用程序使用了service worker和其他PWA功能,但不知何故,我发现尽管更新了网站或部署了新版本,chrome总是选择,根本不进行网络呼叫。 我认为使用Service Worker缓存index.html是个问题,但无法将其排除在缓存之外,我确实检查了SO上的一些问题和github上的问题,但无法解决这个问题。 我使用

  • 问题内容: 我一直在Internet Explorer上测试我的React.js应用程序,发现有些ES6 / 7代码会破坏它。 我正在使用create-react-app,并且显然它们选择不包含很多polyfill,因为不是每个人都需要它们,并且它们会减慢构建时间(请参见此处和此处的示例)。该文档(在撰写本文时)建议: 如果您使用任何其他需要运行时支持的ES6 +功能(例如Array.from()

  • 我有两个应用程序,一个是用nodejs(在本例中是简单的模拟服务器)和spring应用程序(核心应用程序)编写的。我想在这两者之间创建一个SSL连接。首先,我生成了一对密钥和证书,然后简单地设置一个nodejs来处理SSL(我使用了这个示例:setting ssl-nodeJS)。我已经检查过,当我在浏览器https://localhost:3000中编写时,它给了我一个“安全”连接(打开挂锁--

  • 我是react native的新手,我使用create react native app命令生成项目,执行npm start启动打包程序。到目前为止一切都很好,打包机在地址192.168.232.56:19000上运行,它向我显示二维码和菜单,但当我在模拟器中点击a启动应用程序时,expo应用程序显示: 出现问题,无法加载exp://192.168.232.56:19000 日志上写着 Conne