如何构建多HTML文件的React应用？无需eject实现方案

你的核心问题是create-react-app默认只生成单入口的index.html，而你的后端依赖多个独立HTML页面/URL，部署后其他页面无法正确加载React资源。以下是不用eject的可行方案：

方案一：用Craco配置多入口多HTML输出（推荐） #

Craco可以在不eject的情况下修改create-react-app的webpack配置，实现多入口对应多个HTML文件：

1. 安装依赖

npm install @craco/craco --save-dev

2. 替换package.json里的脚本
   把start、build、test命令替换成craco开头：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

3. 在项目根目录创建craco.config.js，添加多入口和多HTML配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  webpack: {
    entry: {
      login: './src/login.js',
      reset: './src/reset.js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'login.html',
        template: './public/login.html',
        chunks: ['login']
      }),
      new HtmlWebpackPlugin({
        filename: 'reset.html',
        template: './public/reset.html',
        chunks: ['reset']
      })
    ]
  }
};

4. 拆分你的渲染代码

• 新建src/login.js：

import React, { StrictMode } from "react";
import ReactDOM from 'react-dom/client';
import "./styles.css";
import Login from "./Pages/Login";

const root = ReactDOM.createRoot(document.getElementById('login'));
root.render(<StrictMode><Login /></StrictMode>);

• 新建src/reset.js：

import React, { StrictMode } from "react";
import ReactDOM from 'react-dom/client';
import "./styles.css";
import Reset from "./Pages/Reset";

const root = ReactDOM.createRoot(document.getElementById('reset'));
root.render(<StrictMode><Reset /></StrictMode>);

5. 在public目录下创建对应的HTML模板
   比如public/login.html（注意id是login）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Login</title>
  </head>
  <body>
    <div id="login"></div>
  </body>
</html>

public/reset.html同理，id为reset。

执行npm run build后，dist目录会生成login.html、reset.html以及对应的JS/CSS资源，部署到后端后，对应URL指向这两个HTML文件即可正常加载各自的React组件。

方案二：后端适配单页应用（备选） #

如果你的后端允许调整路由规则，可以把所有前端路由请求都指向index.html，然后用React Router在前端处理不同路径的组件渲染。但这个方案需要后端配合修改路由转发规则，且和你当前依赖多HTML页面的架构冲突，仅作为备选。

方案三：手动修改构建产物（临时方案） #

每次执行npm run build后，复制dist/index.html为dist/reset.html，并把其中的<div id="root"></div>改成<div id="reset"></div>，同时修改你的渲染代码里的目标容器。但这个方案每次构建都要手动操作，容易出错，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Moodo9