Create-React-App多入口配置异常：用户端与管理端共用代码库访问/admin无响应

Hey there! Let's troubleshoot that /admin path issue step by step—since you've already ejected your CRA and set up multiple entry points, the problem is likely hiding in one of a few key configuration areas. Here's what to check:

First, make sure your webpack.config.js is correctly defining two separate entry points and outputting bundles that map to them:

// In webpack.config.js
entry: {
  main: paths.appIndexJs, // Your user-facing entry (e.g., src/index.js)
  admin: paths.appAdminJs, // Your admin entry (e.g., src/admin/index.js)
},
output: {
  filename: 'static/js/[name].bundle.js', // Critical: [name] will generate main.bundle.js and admin.bundle.js
  // ... rest of your output config
}

You need two separate HtmlWebpackPlugin instances to generate HTML files for each entry. Each instance must explicitly link to its corresponding bundle via the chunks property:

// In the plugins array of webpack.config.js
plugins: [
  // User-facing HTML
  new HtmlWebpackPlugin({
    inject: true,
    chunks: ['main'], // Only include the main bundle here
    template: paths.appHtml,
    filename: 'index.html',
  }),
  // Admin HTML
  new HtmlWebpackPlugin({
    inject: true,
    chunks: ['admin'], // Only include the admin bundle here
    template: paths.appAdminHtml, // Use a dedicated admin.html or reuse the base template
    filename: 'admin.html',
  }),
  // ... rest of your plugins
]

If you skip the chunks property, both HTML files will load both bundles, which can cause conflicts.

If you're using BrowserRouter for routing (which you probably are), the dev server needs to know to serve admin.html when it receives requests to /admin paths. Update your devServer config:

devServer: {
  // ... your existing dev server settings
  historyApiFallback: {
    rewrites: [
      { from: /^\/admin/, to: '/admin.html' }, // Send all /admin* requests to admin.html
      { from: /^\/.*/, to: '/index.html' }, // Send everything else to index.html
    ],
  },
}

Without this rewrite, visiting /admin will load the user-facing index.html instead of the admin bundle, resulting in a blank or incorrect page.

Make sure your admin entry file (e.g., src/admin/index.js) is setting up its own router and mounting to the correct DOM element:

// src/admin/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import AdminDashboard from './AdminDashboard';

// Ensure your admin.html has a <div id="root"></div> just like index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/admin" element={<AdminDashboard />} />
      // Add other admin-specific routes here
    </Routes>
  </BrowserRouter>
);

As a quick sanity check, visit http://localhost:3000/admin.html directly. If the admin UI loads here but not at /admin, the problem is definitely the historyApiFallback rewrite. If it doesn't load here either, double-check your entry path and HtmlWebpackPlugin chunk configuration.

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