How React JS index.js file contacting index.html for id references? [duplicate]

Question

Create-React-App has a very interesting setup.

I started digging in the package.json npm script start

"start": "react-scripts start"

That takes me to their binary react-scripts under node_modules/.bin
I'll post the relevant stuff here.

switch (script) {
  case 'build':
  case 'eject':
  case 'start':
  case 'test': {
    const result = spawn.sync(
      'node',
      [require.resolve('../scripts/' + script)].concat(args),
      { stdio: 'inherit' }
    );

So this tells me that they are looking for script inside ../scripts/ folder.

So I go to the react-scripts npm module(node_modules/react-scripts) and open up the node_modules/react-scripts/scripts/start.js file since I was doing npm start.

Now here is where I found the webpack config I was looking for.
They were specifically referring to node_modules/react-scripts/config/webpack.config.dev.js. I'll post the relevant stuff here.

entry: [
  // Finally, this is your app's code:
  paths.appIndexJs,
],
plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
  }),

So file referred by paths.appIndexJs is the entry file in the webpack config.

And they are using HtmlWebpackPlugin to load the html at the path paths.appHtml.

Final piece of the puzzle is linking this back to the files you posted. Posting relevant stuff from paths.js

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  ...
}

So inside your application directory,
appHtml is file public/index.html
appIndexJs is file src/index.js

Your two files in question.
Wow! That was quite a journey..:P

---

Update 1 - As of [email protected]

The react-scripts binary under node_modules/.bin has changed the logic as below. Essentially doing the same thing.

if (['build', 'eject', 'start', 'test'].includes(script)) {
  const result = spawn.sync(
    'node',
    nodeArgs
      .concat(require.resolve('../scripts/' + script))
      .concat(args.slice(scriptIndex + 1)),
    { stdio: 'inherit' }
  );

The webpack configs for dev & prod has been combined into one.
const configFactory = require('../config/webpack.config');

The HTMLWebpackPlugin config looks like this - This is since they have to conditionally add production config on top of this

plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin(
    Object.assign(
      {},
      {
        inject: true,
        template: paths.appHtml,
      },

The paths file code has some updates

module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  ...
};