Estoy aprendiendo Reaccionar. En el juego de tres en raya ( https://reactjs.org/tutorial/tutorial.html ), el archivo index.html tenía algunos controladores de eventos y un div que apuntaba a id=root. Pero nada sobre un archivo index.js, que tiene un ReactDOM.render.
¿Qué le dice al navegador que ejecute el código index.js si no hay una etiqueta cargándolo?
Este enlace ( ¿Dónde está la conexión entre index.html e index.js en una aplicación Create-React-App? ) dice:
Nuestra configuración especifica que Webpack usa src/index.js como un "punto de entrada". Así que ese es el primer módulo que lee, y sigue a otros módulos para compilarlos en un solo paquete.
Cuando webpack compila los activos, produce un solo paquete (o varios si usa la división de código). Hace que sus rutas finales estén disponibles para todos los complementos. Estamos usando uno de esos complementos para inyectar scripts en HTML.
Pero si esta es la respuesta, entonces ¿por qué un navegador debería saber sobre el paquete web, especialmente porque esto no se menciona en el archivo index.html mínimo?
El script de compilación create-react-app le dice a webpack que cree los paquetes, comenzando con src/index.js como punto de entrada. También parte de este script de compilación es crear una versión modificada del archivo index.html que apunta a los archivos de paquete recién creados. Puede encontrar el archivo index.html modificado en su directorio /build , y habrá obtenido algo como lo siguiente:
<script src="/static/js/main.379f1d19.chunk.js"></script>Esa etiqueta de script es cómo el navegador sabe qué cargar.
Intente ejecutar npm run build. el archivo index.html discutido en la respuesta anterior está en el directorio de compilación producido por webpack después de ejecutar ese comando.
Debajo del capó, Create React App usa Webpack con html-webpack-plugin.
este complemento producirá el archivo index.html usando index.html en el directorio public como plantilla
Nuestra configuración especifica que Webpack usa src/index.js como un "punto de entrada". Así que ese es el primer módulo que lee, y sigue a otros módulos para compilarlos en un solo paquete.
cuando ejecuta npm run build webpack comienza con index.js y cada vez que importa incluye ese módulo en un script que se inyectaría en el index.html generado anteriormente como se explica a continuación en la respuesta que compartió
Hemos habilitado html-webpack-plugin para generar el archivo HTML. En nuestra configuración, especificamos que debería leer public/index.html como plantilla. También hemos establecido la opción de inyección en verdadero. Con esa opción, html-webpack-plugin agrega una ruta proporcionada por Webpack directamente en la página HTML final. Esta página final es la que obtiene en build/index.html después de ejecutar npm run build, y la que se sirve desde / cuando ejecuta npm start.
Este es mi entendimiento, espero que esto ayude.