I'm learning React. In the tic-tac-toe game ( https://reactjs.org/tutorial/tutorial.html ) the index.html file had some event handlers and a div pointing at id=root. But nothing about an index.js file, which has a ReactDOM.render.
What tells the browser to run the index.js code if there is no tag loading it?
This link ( Where's the connection between index.html and index.js in a Create-React-App application? ) says:
Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.
When webpack compiles the assets, it produces a single (or several if you use code splitting) bundles. It makes their final paths available to all plugins. We are using one such plugin for injecting scripts into HTML.
But if this is the answer, then why should a browser know about webpack, especially as this isn't mentioned in the minimal index.html file?
CodePudding user response：
The create-react-app build script tells webpack to create the bundle(s), starting with src/index.js as the entry point. Also part of this build script is to create a modified version of the index.html file which points to the newly-created bundle file(s). You can find the modified index.html file in your /build directory, and it will have gained something like the following:
<script src="/static/js/main.379f1d19.chunk.js"></script>
That script tag is how the browser knows what to load.
CodePudding user response：
Try running npm run build. the index.html file discussed in the answer above is in the build directory produced by webpack after running that command.
Under the hood, Create React App uses Webpack with html-webpack-plugin.
this plugin will be producing the index.html file by using the index.html in the public directory as a template
Our configuration specifies that Webpack uses src/index.js as an “entry point”. So that’s the first module it reads, and it follows from it to other modules to compile them into a single bundle.
when running npm run build webpack starts with index.js and every time you import it includes that module in one script that would be injected into the index.html generated above as explained below in the answer you shared
We have enabled html-webpack-plugin to generate the HTML file. In our configuration, we specified that it should read public/index.html as a template. We have also set inject option to true. With that option, html-webpack-plugin adds a with the path provided by Webpack right into the final HTML page. This final page is the one you get in build/index.html after running npm run build, and the one that gets served from / when you run npm start.
This is my understanding I hope this helps.