☰

Create-React-App アプリケーションで index.html と index.js の接続はどこにありますか? 質問する

tag-icon • tag-icon javascript html reactjs create-react-app
Create-React-App アプリケーションで index.html と index.js の接続はどこにありますか? 質問する

index.jsCreate React App を使い始めたのですが、 が内でどのようにロードされるのか理解できません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は内部的にWebpackを使用しており、html-webpack-プラグイン。

私たちの構成指定するWebpackが使用src/index.jsする"エントリーポイント"これが最初に読み取られるモジュールであり、そこから他のモジュールに進み、それらを 1 つのバンドルにコンパイルします。

webpack がアセットをコンパイルすると、単一のバンドル (コード分割を使用する場合は複数のバンドル) が生成されます。これにより、最終的なパスがすべてのプラグインで利用できるようになります。私たちは、HTML にスクリプトを挿入するために、このようなプラグインの 1 つを使用しています。

私たちはhtml-webpack-プラグインHTMLファイルを生成するために、私たちの設定では指定されたpublic/index.htmlテンプレートとして読むべきである。また、inject オプションに を追加しますtrue。このオプションを使用すると、は Webpack によって提供されたパスを持つ を最終 HTML ページにhtml-webpack-plugin追加します。この最終ページはを実行した後に<script>表示されるページであり、を実行したときに から提供されるページです。build/index.htmlnpm run build/npm start

Create React App の優れた点は、実際にそれについて考える必要がないことです。

おすすめ記事