如何向 CRA 添加多个入口点

Question

我有一个正常的 CRA 没有弹出。我想添加一种方式，当我点击某个 URL 时，它会加载一个不同的 public/index.html 页面，然后 reactdom 呈现一个“不同的”主组件来启动应用程序

在不弹出的情况下这可能吗？我该怎么做？

或

如果我弹出，最简单的方法是什么？

Google 似乎没有提供太多有用的东西

Answer 1

为了有多个入口点你需要改变create-react-app的webpack配置

你可以使用react-app-rewired覆盖create-react-app现有的webpack配置，如果不是你需要从create-react-app中弹出并更改配置

这里是link 用于讨论相同的问题

四步添加多个入口点到create-react-app （假设我们添加了一个 admin.html）：

1. 弹出项目

   npm run eject

2. 向webpack.config.dev.js添加多个条目

   entry: {
    index: [
     require.resolve('react-dev-utils/webpackHotDevClient'),
     require.resolve('./polyfills'),
     require.resolve('react-error-overlay'),
     paths.appIndexJs,
    ],
    admin:[
      require.resolve('react-dev-utils/webpackHotDevClient'),
      require.resolve('./polyfills'),
      require.resolve('react-error-overlay'),
      paths.appSrc + "/admin.js",
    ]
   },
   output: {
     path: paths.appBuild,
     pathinfo: true,
     filename: 'static/js/[name].bundle.js',
     chunkFilename: 'static/js/[name].chunk.js',
     publicPath: publicPath,
     devtoolModuleFilenameTemplate: info =>
     path.resolve(info.absoluteResourcePath),
    },
   

3. 修改 HtmlWebpackPlugin 添加新的插件节点：

       new HtmlWebpackPlugin({
         inject: true,
         chunks: ["index"],
         template: paths.appHtml,
       }),
       new HtmlWebpackPlugin({
         inject: true,
         chunks: ["admin"],
         template: paths.appHtml,
         filename: 'admin.html',
       }),
   

   4.webpack Dev Server 重写 urls/config/webpackDevServer.config.js:

    historyApiFallback: {
     disableDotRule: true,
     rewrites: [
       { from: /^\/admin.html/, to: '/build/admin.html' },
     ]
    }