Keep array-based entries relative-order during injectRefreshEntry

[miguel-silva]

First of all: hi @pmmmwh and thanks a lot for your work in making it easy to bring react-refresh to webpack based projects. 👏

Motivation

In some of the projects I am currently working on, the bundles are loaded from a regional CDN, and thus we need to rely on a dynamic webpack public path.

// in set-env.js file
__webpack_public_path__ = `https://${cdnDomain}/my-assets-path/`;

I found that, for HMR - in this case based on webpack-hot-middleware - to work appropriately with a dynamic webpack public path one has to inject an entry that defines the dynamic public path prior to the socket entry:

// in webpack.config.js
...
  entry: {
    app: [
      './src/set-env.js',
      'webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true',
      './src/app.js'
    ]
  }
...

When I added react-refresh-webpack-plugin (based on the webpack-hot-middleware example) I noticed that it changed the relative order of the entries, outputting something like this:

// entries output (before this PR)
[
  ReactRefreshEntry,
  'webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true',
  ErrorOverlayEntry,
  './src/set-env.js',
  './src/app.js'
]

This broke the HMR setup because the dynamic public path definition no longer is set before the socket entry.

Changes

Ensure that injectRefreshEntry keeps the relative order of an array-based entry. Given the example above:

// entries output (after this PR)
[
  ReactRefreshEntry,
+ './src/set-env.js',
  'webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true',
  ErrorOverlayEntry,
- './src/set-env.js',
  './src/app.js'
]

Let me know if there are doubts about the problem and/or solution, and feel free to drop any suggestions.

Thank you for your time!

[pmmmwh]

Good catch, thanks!