What's the difference between npm run watch and npm run hot in Laravel?

Question

Because these commands are both available in Laravel, I don't quite understand what's the difference between them. But I do notice that npm run hot would not be effected if I changed scss files, which npm run watch will perform correctly.

Answer 1

Hot Module Replacement (or Hot Reloading) allows you to, not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser. Check full documentation here

Answer 2

It won't work right now for regular Sass files. The HMR feature is specifically for Vue and .vue components.

https://github.com/JeffreyWay/laravel-mix/issues/92#issuecomment-273558018 https://github.com/JeffreyWay/laravel-mix/issues/233

If you are curious what the HMR actually means, you can refer to the official docs: https://webpack.js.org/guides/hot-module-replacement/