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）：

弹出项目

npm run eject

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

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

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

4.webpack开发服务器重写URL /config/webpackDevServer.config.js：

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

如何将多个入口点添加到CRA

1 个答案: