create-react-app 配置多个html入口的方法,有很多现成的文章资料,但是其中有个3个细节点,大家讲解的不详细,本文做说明
官方文档中
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配置
举例需要拆分业务页面和登录页面,业务页面为域名首页即 / 即可重定向到 index.html,而登录页为/login,如何重定向到 login.html,大部分资料中会建议如下配置
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
可以再进行一次重定向,参考如下配置
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 就可以正确显示
参考如下代码
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,
};
},
}),
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。