BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Create-React-Appアプリケーションのindex.htmlとindex.jsの接続は？

2022-09-05 17:20:13

質問

Reactアプリの作成で遊んでいるのですが、Reactアプリの中の 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は、Webpackを利用して、裏側では html-webpack-plugin .

私たちの設定 は を指定し、Webpack が src/index.js を "エントリーポイント" . つまり、これが最初に読み込まれるモジュールで、そこから他のモジュールへと続き、一つのバンドルにコンパイルされるのです。

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の良さは、実際に考える必要がないことです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します