Multiple entry points?

[tremby]

I can get hot reloading working with a single "index" entry point, but not with multiple entry points (as allowed by rewired).

My config-overrides.js file currently looks like this:

const paths = require('react-scripts/config/paths');
const path = require('path');
const publicPath = paths.servedPath;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');

// Paths to javascript & HTML files
paths.appJs = paths.appSrc + '/du.js';
paths.appHtml = paths.appPublic + '/du.html';
paths.rlglJs = paths.appSrc + '/rlgl.js';
paths.rlglHtml = paths.appPublic + '/rlgl.html';

// Utility function to replace plugins in the webpack config files used by react-scripts
const replacePlugin = (plugins, nameMatcher, newPlugin) => {
  const pluginIndex = plugins.findIndex((plugin) => {
    return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
  });

  if (pluginIndex === -1) {
    return plugins;
  }

  const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));

  return nextPlugins;
};

module.exports = function override(config, env) {
  // Define entry points
  config.entry = {
    du: [
      require.resolve('react-scripts/config/polyfills'),
      paths.appJs,
    ],
    rlgl: [
      require.resolve('react-scripts/config/polyfills'),
      paths.rlglJs,
    ]
  };

  // Split code into chunks for du & rlgl
  config.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),
  };

  // Create a HTML entry for du that only includes code for the du bundle
  const duHtmlPlugin = new HtmlWebpackPlugin({
    inject: true,
    title: 'DU',
    chunks: ['du'],
    filename: 'du.html',
    template: paths.appHtml,
  });

  // Create a HTML entry for rlgl that only includes code for the rlgl bundle
  const rlglHtmlPlugin = new HtmlWebpackPlugin({
    inject: true,
    title: 'RLGL',
    chunks: ['rlgl'],
    filename: 'rlgl.html',
    template: paths.rlglHtml,
  });

  // Replace the default HTML entry in the webpack config used by react-scripts with the du HTML entry
  config.plugins = replacePlugin(config.plugins, (name) => /HtmlWebpackPlugin/i.test(name), duHtmlPlugin);

  // Add the second HTML plugin for other entry point
  config.plugins.push(rlglHtmlPlugin);

  // Enable hot loading
  config = rewireReactHotLoader(config, env);
  return config;
};

When I make a change in the source code, no hot-reloading occurs.

If I comment out pretty much everything from here, and move one of my entry points (du.js for example) to index.js, hot reloading works OK. So the hot reloading changes in the app component are fine, I think.

Am I doing something wrong, or is this not possible currently?

[dddoronnn]

Just add require.resolve('react-dev-utils/webpackHotDevClient') to your customized entry arrays. You can also remove the rewireReactHotLoader() wrapping at the end.

[mdugue]

hey @dddoronnn, I just tried your suggested solution, but did not succeed… Do you have any working example?

[sainoba]

Any luck?

[tremby]

[Video clip of Homer Simpson receding into hedge]

I don't even remember which project I was working on when I needed this! Enough upvotes that I'm not just going to close it; hopefully a solution is found though for you and anyone who needs this in future.