Create React App V2 - Multiple entry points

Question

I\'m trying to build a React app with 2 entry points, one for the App and one for the Admin panel.

I\'m starting with Create React App V2 and following this gitHub issue

Answer 1

I know it's a delayed answer, but just for future searches, the steps are:

1. Eject (yarn eject)
2. Edit paths.js and add the second entry point html file under the entry for appHtml

appAdminHtml: resolveApp('public/admin.html'),

3. Update entry inside webpack.config.js to include one entry per entry point.

entry: {
  index: [
    isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ].filter(Boolean),
  admin: [
    isEnvDevelopment &&
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appSrc + '/admin/index.js',
  ].filter(Boolean)
},

4. Change the generated output JS file to the name of the entry (inside webpack.config.js)

output: {
  path: isEnvProduction ? paths.appBuild : undefined,
  pathinfo: isEnvDevelopment,
  // This is the important entry
  filename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].js'
    : isEnvDevelopment && 'static/js/[name].bundle.js',
  futureEmitAssets: true,
  chunkFilename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].chunk.js'
    : isEnvDevelopment && 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: isEnvProduction
    ? info =>
        path
          .relative(paths.appSrc, info.absoluteResourcePath)
          .replace(/\\/g, '/')
    : isEnvDevelopment &&
      (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
  jsonpFunction: `webpackJsonp${appPackageJson.name}`,
  globalObject: 'this',
},

5. Update the plugins to generate the second file with the injected js script (also inside webpack.config.js).

// Generates an `index.html` file with the