Как добавить несколько точек входа в CRA

Question

У меня нормальный CRA не выбрасывается.Я хочу добавить способ, которым, когда я нажимаю на определенный URL-адрес, он загружает другую страницу public / index.html, а затем activdom отображает «другой» главный компонент для запуска приложения

Возможно ли это без извлечения и какя бы сделал это?

или

Если я выброшу, какой самый простой способ сделать это?

Google, похоже, не слишком полезен

Answer 1

Чтобы иметь несколько точек входа, необходимо изменить конфигурацию веб-пакета на create-react-app

. Вы можете использовать response-app-rewired , чтобы переопределить существующую конфигурацию веб-пакета create-реагировать-app, Если вам не нужно извлекать из create-реагировать-приложение и изменить конфигурацию

Вот ссылка для обсуждения относительно того же

Четыре шага, чтобы добавитьнесколько точек входа для создания-реакции-приложения (скажем, мы добавили 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 Перезапись сервера DevURL /config/webpackDevServer.config.js:

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