Hot Module Replacement

Hot Module Replacement
Hot Module Replacement (HMR) automatically updates modules in the browser at runtime without the need to refresh the entire page to improve the development experience. This means application state can be preserved across small changes. Parcel's HMR implementation supports JavaScript and CSS resources out of the box. HMR is automatically disabled when packaging in production mode.
When you save the file, Parcel rebuilds the changes and sends updates to any running clients that contain the new code. The new code replaces the old version and is recalculated along with all parent resources. You can hook into this process using the module.hot API, which can notify your code when a module is about to be dropped or when a new version comes in. Projects like react-hot-loader can help you with this process and work with Parcel out of the box.
There are two known methods: module.hot.accept and module.hot.dispose. You can use a callback function in module.hot.accept that is executed when the module or any of its dependencies are updated. When the module is about to be replaced, the module.hot.dispose callback function is called.

if (module.hot) {
  module.hot.dispose(function () {
    // 模块即将被替换时
  });
  module.hot.accept(function () {
    // 模块或其依赖项之一刚刚更新时
  });
}

Safe Write
Some text editors and IDEs have a feature called safe write, which basically prevents Data loss, by taking a copy of the file and renaming it while saving.
When using hot module reloading (HMR), this feature prevents automatic detection of file updates. To disable safe write, use the options provided below:
Sublime Text 3 Set atomic_save: "false " to your user preferences.
Use search in IntelliJ preferences to find "safe write" and disable it. *Vim Add :set backupcopy=yes to your settings.
WebStorm Uncheck "safe write" in Preferences > Appearance & Behavior > System Settings.