Take the example of a scaffolding project created by create-React-app

One Installation Dependency

yarn add react-app-rewire-multiple-entry react-app-rewired customize-cra
Copy the code

Create config-overrides. Js in the root directory

const { override } = require("customize-cra");
const path = require("path");
const paths = require("react-scripts/config/paths");

// Configure the Favicon public file packaging directory
paths.appBuild = path.join(path.dirname(paths.appBuild), "htdocs");

const glob = require("glob");
const fs = require("fs");
/** * get the entry of each page *@param {string} modPath* /
function getEntries(modPath) {
  const entries = [];
  let dirname, currentDir, pageName;
  glob.sync(modPath).forEach((entry) = > {
    dirname = path.dirname(entry);
    currentDir = dirname.split("/").pop();
    pageName = currentDir
      .replace(/([A-Z])/g."$1")
      .toLowerCase()
      .replace("-"."");
    entries.push({
      entry,
      template: path.join(dirname, "/index.html"),
      outPath: ` /${pageName}.html`}); });return entries;
}
const pageEntries = getEntries(path.join(__dirname, "./src/pages/**/main.tsx"));
const multipleEntry = require("react-app-rewire-multiple-entry")(pageEntries);
const addEntry = () = > (config) = > {
  multipleEntry.addMultiEntry(config);
  return config;
};

module.exports = override(
  addEntry()
  );

Copy the code

Establish standard catalogue

Four write entry

mbp/main.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

Json rewrite command

"scripts": {
  "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test"
}
Copy the code

done

Note: to configure multiple pages in this way, you need to keep an index. TSX under SRC and export an empty object from it. SRC /index: SRC /index: SRC /index: SRC /index: SRC /index: SRC /index: SRC /index: SRC /indexCopy the code