A couple of questions about Webpack HMR and how to use it in ReactJS application from scratch?

Question

Currently, I have a task that integrating Webpack HRM into Single Spa application. So I have researched some articles about Webpack HRM and React Hot Loader or React Fast Refresh. I also read some articles that using module.hot.accept to receive new updates.

But there are a few things that I still wonder:

• Does React Hot Loader/ React Fast Refresh plugins automatically add module.hot.accept in my source code in development?
• How SystemJS handle new update received from Webpack Dev Server? (used Chrome Debug Tool to inspect socket connection and http connection - I see there is exchange between browser (HMR Runtime in my source code) and Webpack Dev Server but nothing happens until I proactively reload the page).
• How can I implement HMR in my source code without React Hot Loader or React Refresh plugins? (Just with module.hot.accept)

Does anybody know deeply about Webpack HMR? Please help me understand this. Thank you in advance

P/s: I know my English is not good and my questions are wide. Please correct me if you understand my idea. Thank a lot.

Answer 1

In general, React Hot Loader and React Fast Refresh do not automatically add module.hot.accept to your source code. These plugins provide a way to use hot module replacement (HMR) in your React application, but you will still need to add the necessary code to your application to enable HMR.

When new updates are received from the Webpack development server, the SystemJS library is responsible for handling those updates. SystemJS is a dynamic module loader that can be used to load modules at runtime, and it can be configured to use HMR to update those modules when new versions are available. When SystemJS receives updates from the Webpack development server, it will use HMR to update the relevant modules in your application.

To implement HMR in your source code without using React Hot Loader or React Fast Refresh, you will need to add the necessary code to enable HMR. This typically involves adding a call to module.hot.accept in your entry point file, as well as adding code to check if the module is being executed in a development environment with HMR enabled. You can find more detailed instructions and examples online. Keep in mind that using HMR without a plugin like React Hot Loader or React Fast Refresh can be more complex, and it may be best to use one of these plugins to simplify the process.