提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

create-react-app项目支持多入口注意事项

2023-02-18 16:23:50 时间

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，大部分资料中会建议如下配置

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 就可以正确显示

3. ManifestPlugin插件的配置

参考如下代码

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,
    };
  },
}),

相关文章