webpack "--watch" vs "--hot" : what's the difference?

Question

What is the difference between using

webpack --watch 

and

webpack-dev-server --hot 

thanks.

Answer 1

According to webpack documentation @ https://webpack.github.io/docs/tutorials/getting-started/#watch-mode

When using watch mode, webpack installs file watchers to all files, which were used in the compilation process. If any change is detected, it’ll run the compilation again. When caching is enabled, webpack keeps each module in memory and will reuse it if it isn’t changed.

So, basically, the difference between running webpack and webpack --watch is that in using --watch, your CLI will hang after the compilation process waiting for any code changes in your files and if there is a change, then it will recompile and wait again. You should be aware that if you are using webpack-dev-server, then you do not need to use this option because webpack-dev-server uses webpack's watch mode by default according to its documentation:

The dev server uses webpack’s watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory.

So, what is webpack-dev-server --hot? Basically, this adds the HotModuleReplacementPlugin to the webpack configuration, which will essentially allow you to only reload the component that is changed instead of doing a full page refresh! Pretty darn useful when you are working with states! According to the documentation:

Each mode also supports Hot Module Replacement in which the bundle is notified that a change happened instead of a full page reload. A Hot Module Replacement runtime could then load the updated modules and inject them into the running app.

More information on what it is and how to used it here: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

I hope this helps in understanding webpack a bit more!

Answer 2

In short,

--watch means : watch for the file changes and compile again when the source files changes.

--hot (hot reload) means : don't reload the full page after the source changes, just reload the part which is changed.