reactjs - 如何向 CRA 添加多个入口点

Question

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

如果不弹出这可能吗？我该怎么做？

或者

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

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

标签： reactjscreate-react-app

Answer 1

为了有多个入口点，您需要更改 webpack 的配置create-react-app

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

这是讨论相同问题的链接

向 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' },
     ]
    }