Search code examples
reactjswebpackcreate-react-app

What renders Create React App html template during build

Create React App includes a public/index.html which contains several strings that are being replaced by a templating engine.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

My question is where in the CRA webpack config file or build script is %PUBLIC_URL% being replaced with the other value? I have seen where the CRA uses the html-webpack-plugin, but this appears to use the default lodash templating engine, which uses different syntaxt to demark what gets replaced

Solution

  • The replacement is done by the InterpolateHtmlPlugin.

    Here is the corresponding line in the webpack config: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L655

    And here is the source for InterpolateHtmlPlugin: https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/InterpolateHtmlPlugin.js