How to create multiple entries and output for create-react-app and keep them separated?

Question

My use case is that I am using electron and would like to have multiple windows that can be loaded. One will load initially, a node app, but will not be displayed to the user. I am simply using it to run specific tasks. The other window will be the UI client and this will be built in react. I am using create-react-app.

Steps I’ve taken

• I have ejected.
• I have created multiple entry points.

Basically, I have followed discussion here

The problem I am currently facing, is webpack is inserting my second bundled file into the orignal index.html

I would like both bundles to remain completely separate as the secondary bundle will be initiated by electron.

What do I need to modify in my webpack configuration to keep the bundles completely separate?

Modifications Made

webpack.config.dev.js

Entry:

entry: {
  app: [
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ],
  secondary: [
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.secondaryIndexJs,
  ]
},


output: {
  pathinfo: true,
  filename: 'static/js/[name].bundle.js',
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: info =>
  path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},

Additional HtmlWebpackPlugin in plugins

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

paths.js

• modified accordingly

Answer 1

The solution is to simply add excludeChunks: ["secondary"], to the original HtmlWebpackPlugin property.

In its totality:

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