Wo ist die Verbindung zwischen index.html und index.js in einer Create-React-App-Anwendung?

82

Ich fange an, mit der Create React App zu spielen, kann aber nicht verstehen, wie die App index.jsgeladen wird index.html. Dies ist der HTML-Code:

<!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>

Aber ich kann nirgendwo den Import der sehen index.js. Wo ist die Verbindung? Was vermisse ich?

javascript html reactjs create-react-app Piero
quelle
Wie dienen Sie Ihren Inhalten?
Nicklas Pouey-Winger
Ich habe nichts an der Standardeinstellung geändert, ich mache nur create-react-app my-appFolgendes : und ich öffne das Projekt mit Webstorm, dann starte ich npm, aber meine Frage ist, woher index.html weiß, dass index.js geladen werden muss? wo ist schreiben
Piero
6
webpack.github.io/docs/webpack-dev-server.html Webpack-dev-server übernimmt dies für Sie in der Entwicklung.
Nicklas Pouey-Winger
@NicklasWinger Wo finde ich die Konfigurationsdatei, um den Mechanismus zu verstehen?
Piero
4
Sie können ausführen npm run eject, um die Konfigurationen manuell zu steuern. Ich empfehle, ein grundlegenderes Setup von Grund auf durchzuführen, um vollständig zu verstehen, was los ist :)
Nicklas Pouey-Winger

Antworten:

113

Unter der Haube verwendet Create React App Webpack mit dem HTML-Webpack-Plugin .

Unsere Konfiguration gibt an, dass Webpack src/index.jsals „Einstiegspunkt“ verwendet wird . Das ist also das erste Modul, das es liest, und es folgt daraus zu anderen Modulen, um sie zu einem einzigen Bundle zu kompilieren.

Wenn Webpack die Assets kompiliert, werden ein einzelnes (oder mehrere, wenn Sie Code-Splitting verwenden) Bundles erstellt. Es stellt ihre endgültigen Pfade allen Plugins zur Verfügung. Wir verwenden ein solches Plugin zum Einfügen von Skripten in HTML.

Wir haben das HTML-Webpack-Plugin aktiviert , um die HTML-Datei zu generieren. In unserer Konfiguration haben wir angegeben, dass es public/index.htmlals Vorlage gelesen werden soll . Wir haben auch die inject Option auf gesetzt true. Mit dieser Option wird html-webpack-pluginein <script>mit dem von Webpack bereitgestellten Pfad direkt in die endgültige HTML-Seite eingefügt. Diese letzte Seite wird build/index.htmlnach dem Ausführen aufgerufen npm run buildund ab dem Ausführen /bereitgestellt npm start.

Hoffe das hilft! Das Schöne an der Create React App ist, dass Sie nicht wirklich darüber nachdenken müssen.

Dan Abramov
quelle
Noch eine Frage, welche IDE verwenden Sie für die Reaktion oder js im Allgemeinen? Ich habe bei der Wahl zwischen Atom und Webstorm gekämpft. Was denkst du?
Piero
1
Ich benutze Webstorm und bin bisher sehr zufrieden damit.
Lancelot
2
Wie lösen Sie mehrere Pfade auf, um verschiedene HTML-Seiten zu laden?
Quantumpotato
3
Eigentlich ist @Dan Abramov ein Genie: D, aber ich stimme ihm nicht zu, als er sagte "Sie müssen nicht wirklich darüber nachdenken", weil jeder die Dinge von Grund auf verstehen sollte.
Seif Eddine Slimene
Hoffentlich ist das irgendwo anders als hier dokumentiert? In der CRA-Dokumentation? Wir müssen die Implementierung nicht kennen, aber wir müssen wissen, dass die Dinge mit index.js beginnen und wie sie public / index.html beschädigen. Vielen Dank an alle!
Ashley Aitken