如何在 create-react-app 项目中重命名 index.html？

Question

我正在使用 Surge 来托管我的 create-react-app 网站，为了使用客户端路由，您需要使用入口点，200.html但是在使用 create-react-app 时，它默认设置为index.html. 在不破坏网站的情况下重命名该文件的最佳方法是什么？

Answer 1

正如相关的CRA 问题 1761 中所建议的，建议的解决方案是弹出整个配置（包括 Webpack）：

npm run eject

运行 npm run eject 会将所有配置文件和可传递依赖项（Webpack、Babel、ESLint 等）复制到您的项目中，以便您可以完全控制它们。npm start 和 npm run build 之类的命令仍然有效，但它们将指向复制的脚本，因此您可以对其进行调整。在这一点上，你是靠自己的。（为什么我喜欢 Create React App）

弹出后你就可以手动编辑里面的配置了config/webpack.*.js。

你可能会期待有这样的一行：

new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, filename: 'index.html', ...)

您可以简单地替换index.html为所需的200.html.

还可以使用构建命令（如建议的lcoder）：

{
  "scripts": {
    ...
    "build": "node scripts/build.js && mv build/index.html build/app.html",
    ...
  }
}

假设在build过程之后简单的重命名对你来说就足够了。

Answer 2

更新的答案

对于较新的 create-react-app 版本，看起来配置发生了一些变化。

首先，您需要弹出：

npm run eject

然后打开config文件夹中的paths.js，并更改module.exports中的appHtml属性。这是您需要进行的唯一更改。

以下是修改后的导出对象的示例：

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/mynewawesomeindexfile.html'),  //Change only this line
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};