Webpack Hot Swap Experience

1. In Webpack hot swap, the page is partially refreshed rather than overloaded when the file is modified.

2. In Webpack hot swap, when a file is modified, the file is replaced with the associated file (that is, the file that imports the file) to re-execute the code in it. The page is refreshed locally.

3. In Webpack hot swap, if a file (hello.js) is referenced by more than one file, the object in the export of the Hello.js file is modified in any file referencing the file, and the object is modified in other files. In other words, the exported object in a file belongs to the global object, and the output object obtained by the import file is the global object, and the modification of the global variable is actually made on the other page, so it is the changed object when the output object is obtained from other pages.

4. In the Webpack hot swap, the modified file is re-executed (i.e. the modified file and its associated files) after the modification, but this does not mean that the previous operation is undone, that is, the modified file is executed again on the previous operation. Refreshing the browser can remove this effect and will be re-executed according to the current code.

Webpack Hot Swap Experience