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

IT技术 javascript html reactjs create-react-app
2021-03-14 23:12:26

我开始使用 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. 连接在哪里?我错过了什么?

1个回答

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

我们的配置指定Webpacksrc/index.js用作“入口点”所以这是它读取的第一个module,然后它会跟随其他module将它们编译成单个包。

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

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

希望这可以帮助!Create React App 的美妙之处在于你实际上不需要考虑它。

实际上@Dan Abramov 是个天才 :D 但当他说“你实际上不需要考虑它”时我不同意他的观点,因为每个人都应该自下而上地理解事情。
2021-04-16 23:12:26
还有一个问题,你一般用什么 IDE 来做 react 或 js?我在Atom和Webstorm之间的选择中挣扎过,你怎么看?
2021-04-22 23:12:26
希望这在除了这里之外的其他地方被记录?在 CRA 文件中?我们不需要知道实现,但我们确实需要知道从 index.js 开始的事情以及它如何处理 public/index.html 谢谢大家!
2021-04-25 23:12:26
我正在使用 Webstorm,到目前为止我对它非常满意。
2021-05-02 23:12:26
如何解析多个路径以加载不同的 HTML 页面?
2021-05-02 23:12:26