Kết nối giữa index.html và index.js trong ứng dụng Create-React-App ở đâu?

Question 1

Tôi đang bắt đầu chơi với Ứng dụng Create React, nhưng tôi không thể hiểu cách index.jstải bên trong index.html. Đây là mã 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>

Nhưng tôi không thể thấy bất kỳ nơi nào nhập khẩu index.js. Kết nối ở đâu? Tôi đang thiếu gì?

Question 2

Về cơ bản, Tạo Ứng dụng React sử dụng Webpack với html-webpack-plugin .

Cấu hình của chúng tôi chỉ định rằng Webpack sử dụng src/index.jslàm “điểm vào” . Vì vậy, đó là mô-đun đầu tiên nó đọc, và nó theo sau từ mô-đun này đến các mô-đun khác để biên dịch chúng thành một gói duy nhất.

Khi webpack biên dịch nội dung, nó tạo ra một gói (hoặc nhiều gói nếu bạn sử dụng tách mã). Nó làm cho các đường dẫn cuối cùng của chúng có sẵn cho tất cả các plugin. Chúng tôi đang sử dụng một plugin như vậy để đưa các tập lệnh vào HTML.

Chúng tôi đã bật html-webpack-plugin để tạo tệp HTML. Trong cấu hình của chúng tôi, chúng tôi đã chỉ định rằng nó sẽ đọc public/index.htmlnhư một mẫu. Chúng tôi cũng đã đặt inject tùy chọn thành true. Với tùy chọn đó, hãy html-webpack-pluginthêm một <script>đường dẫn do Webpack cung cấp vào ngay trang HTML cuối cùng. Trang cuối cùng này là trang bạn nhận được build/index.htmlsau khi chạy npm run buildvà là trang được phục vụ /khi bạn chạy npm start.

Hi vọng điêu nay co ich! Vẻ đẹp của Create React App là bạn thực sự không cần phải nghĩ về nó.