CRA: npm run buildでindex.jsが実行される仕組み

Reactで書かれたコードを見ることになり、npm run buildしただけでindex.jsとindex.htmlが繋がるのが何でだろうと思って調べた。 Create React App 時代の話なので古いがメモ。

まあここにある通り: javascript - Where's the connection between index.html and index.js in a Create-React-App application? - Stack Overflow

package.jsonのscriptsには次のようにある:

  "scripts": {
    "build": "react-scripts build",
  },

react-scriptsはCreate React Appで使われているものだ。

react-scriptsでは次のような設定がある:

  entry: [
    require.resolve('./polyfills'),
    paths.appIndexJs
  ],

https://github.com/facebook/create-react-app/blob/19fa58d527ae74f2b6baa0867463eea1d290f9a5/packages/react-scripts/config/webpack.config.js#L213

（v5.0.1ではpolyfillsの部分は無くなっている）

entry point にpaths.appIndexJsが指定されている。paths.appIndexJsを見ると次のように定義されている:

appIndexJs: resolveModule(resolveApp, 'src/index'),

なるほど。