preface

Recently, I encountered a problem. Because the login system uses single sign on and the application uses micro front-end, the xswitch plug-in is used to intercept the agent during development, which leads to the need to manually refresh the browser and update each time the code is modified. A solution has been found. It was found that the browser will be refreshed every time instead of hot overload. After exploration, the browser hot overload will not be refreshed successfully.

resolvent

1. First, we need to ensure that the ws service is normal. Because the localhost domain name is not used, an attempt is made to establish a ws service that accesses the domain name.

• Find node_modules_ React dev utils package
• There is a file called webpackHotDevClient.js. In line 58, modify the protocol host and port:

process.env.WDS_SOCKET_HOST = '127.0.0.1';
// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol:  'ws',
    hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
    port: Change to your own port,
    // Hardcoded in WebpackDevServer
    pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
    slashes: true,
  })
);

• Find node_modules_ Webpack dev server version 3.11.2, where the configuration is modified in line 77 of the createSocketUrl.js file under utils under client:

return url.format({
    protocol: 'http',
    auth: auth,
    hostname: '127.0.0.1',
    port: sockPort,
    // If sockPath is provided it'll be passed in via the resourceQuery as a
    // query param so it has to be parsed out of the querystring in order for the
    // client to open the socket to the correct location.
    pathname: sockPath
  });

• At this time, ws can connect. After startup, it will be found that ws successfully connects, but the browser will be refreshed after each code modification.
• After the breakpoint research, it is found that after modifying the code, the code block will be searched, but the code block does not support hot update. It looks like module.hot_ main_ If it is true, throw out unaccept directly, resulting in brushing the browser.
• Normally, react dev utils has processed logic such as module.hot and does not need to write intrusive logic. It may be because this module is not working properly. But the study did not find any problems for a long time. So we use the new service to solve this problem.
• There are two libraries for adding additional code, one is react refresh and the other is react hot loader. First, try to use react refresh, because dan said that react refresh will replace react hot loader in the future, and the reason why react hot loader is not maintained is because react refresh appears.
• When using react refresh, it is found that the ws connection is not connected. Similarly, hard code in to modify the host port. The file location is_@ pmmmwh_react-refresh-webpack-plugin@0.5.1 The next line is sockets/utils/getSocketUrlParts.js 109. After subsequent connections, it was found that the hot update was still unavailable and no error was reported, so the react hot loader was used instead.
• After configuration, it is found that react hot loader can be hot updated without refreshing the browser.
• You need to turn on hot for dev server first:

"devServer": {
    "historyApiFallback": true,
    "hot": true
  },

• Add entry and Babel plugin:

 config
      .toConfig()
      .entry.app.unshift(require.resolve('react-hot-loader/patch'));
    config.toConfig().module.rules.forEach((v, i) => {
      if ((v.test + '').includes('jsx')) {
        v.use.forEach((k) => {
          if (k.loader.includes('babel-loader')) {
            k.options.plugins.push(require.resolve('react-hot-loader/babel'));
          }
        });
      }
    });

• Insert hot into the root component:

import { hot } from 'react-hot-loader/root';
class Appx extends React.PureComponent {
  ...
  render() {
    return (
      <Provider store={store}>
      	...
      </Provider>
    );
  }
}
const App = hot(Appx);

• Thermal overload can be carried out.