「React」多页面配置

以「create-react-app」创建的脚手架项目为例

壹 安装依赖

yarn add react-app-rewire-multiple-entry react-app-rewired customize-cra

贰 根目录新建config-overrides.js

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

//配置favicon公共文件打包目录
paths.appBuild = path.join(path.dirname(paths.appBuild), "htdocs");

const glob = require("glob");
const fs = require("fs");
/**
 * 获取各页面的入口
 * @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()
  );

叁 建立规范目录

肆编写入口

mbp/main.tsx

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

伍 package.json改写命令

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

done

注：用这种方式配置多页面，src下需要保留一个index.tsx，里面导出一个空对象即可;
原因：用override的形式添加entry，原来的入口没有被删除，因此webpack还是会去找src/index;