Javascript 创建 React App index.html 和 index.js 连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42438171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create React App index.html and index.js connection
提问by Piero
I'm starting to playing with the Create React App, but I can't understand how the index.jsis loaded inside index.html. The html code is this:
我开始使用 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>
But I can't see anywhere the import of the index.js. Where is the connection? what I'm missing?
但是我在任何地方都看不到index.js. 连接在哪里？我错过了什么？
回答by Dan Abramov
Under the hood, Create React App uses Webpack with html-webpack-plugin.
在幕后，Create React App 使用带有html-webpack-plugin 的 Webpack。
Our configuration specifiesthat Webpack uses src/index.jsas an “entry point”. So that's the first module it reads, and it follows from it to other modules to compile them into a single bundle.
我们的配置指定Webpacksrc/index.js用作“入口点”。所以这是它读取的第一个模块，然后它会跟随其他模块将它们编译成单个包。
When webpack compiles the assets, it produces a single (or several if you use code splitting) bundles. It makes their final paths available to all plugins. We are using one such plugin for injecting scripts into HTML.
当 webpack 编译资产时，它会生成一个（或多个，如果您使用代码拆分）包。它使所有插件都可以使用它们的最终路径。我们正在使用一个这样的插件来将脚本注入 HTML。
We have enabled html-webpack-pluginto generate the HTML file. In our configuration, we specifiedthat it should read public/index.htmlas a template. We have also set injectoptionto true. With that option, html-webpack-pluginadds a <script>with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.htmlafter running npm run build, and the one that gets served from /when you run npm start.
我们已经启用html-webpack-plugin来生成 HTML 文件。在我们的配置中，我们指定它应该public/index.html作为模板读取。我们还将inject选项设置为true. 使用该选项，html-webpack-plugin将<script>Webpack 提供的路径添加到最终的 HTML 页面中。这最后一个页面是一个你在得到build/index.html运行后npm run build，这会从服务的一个/运行时npm start。
Hope this helps! The beauty of Create React App is you don't actually need to think about it.
希望这可以帮助！Create React App 的美妙之处在于你实际上不需要考虑它。
