create-react-app 配置多个html入口的方法，有很多现成的文章资料，但是其中有个3个细节点，大家讲解的不详细，本文做说明
1. 利用react-app-rewired没有办法优雅的实现多入口
官方文档中
At this point in time, it is difficult to change the entry point from the default src/index.js file due to the way that file is included by create-react-app. The normal rewiring process gets bypassed by several of the create-react-app scripts.
经测试确实无法直接配置多入口
官方推荐的三种方法
1. 在入口文件inex.tsx中导入其他入口
2. 使用自定义的支持多入口react-scripts包来更改入口
3. 重写覆盖函数react-dev-utils/checkRequiredFiles来始终返回true（目的是为了绕过CRA强制校验入口文件）
三种方法都不够优雅，最终我的项目还是eject暴露webpack配置
2. 开发模式重定向配置
举例需要拆分业务页面和登录页面，业务页面为域名首页即 / 即可重定向到 index.html，而登录页为/login，如何重定向到 login.html，大部分资料中会建议如下配置
代码语言：javascript复制historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
index: paths.publicUrlOrPath,
rewrites: [
// { from: /^/index.html/, to: '/build/index.html' },
{ from: /^/login.html/, to: '/build/login.html' },
]
},但是如上配置访问登录页，需要访问 /login.html 才能正确访问到登录页面，如果访问 /login 提示404
可以再进行一次重定向，参考如下配置
代码语言：javascript复制historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
index: paths.publicUrlOrPath,
rewrites: [
// { from: /^/index.html/, to: '/build/index.html' },
{ from: /^/login.html/, to: '/build/login.html' },
{ from: /^/login/, to: '/login.html' },
]
},这样子访问 /login 就可以正确显示
3. ManifestPlugin插件的配置
参考如下代码
代码语言：javascript复制new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
// const entrypointFiles = entrypoints.main.filter(
// fileName => !fileName.endsWith('.map')
// );
let entrypointFiles = [];
for (let [entryFile, fileName] of Object.entries(entrypoints)) {
let notMapFiles = fileName.filter(fileName => !fileName.endsWith('.map'));
entrypointFiles = entrypointFiles.concat(notMapFiles);
};
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
