Hot Module Replacement

During development, lets say you have your application opened in your browser window, and you have navigated to page or state of step 3 of some multi-step process when you realize that you need to change some style or some functionality of a module used in step 3.

Usually what this would have meant without webpack, is that in your editor, you make the required code change in the module file, save it, rebuild/recompile the application and refresh the browser that would reload the application and you have to start from step 1 again to verify your code changes are working as expected.

Webpack provides a feature called Hot Module Replacement (HMR), the webpack-dev-server(WDS) adds the HotModuleReplacementPlugin to the webpack configuration and with the help of this plugin, when you have your application served from WDS, whenever you modify and save any module or component in your application code, then on the webpack-dev-server will replace the module without having us to reload the page and without losing the application state. (How does Webpack’s HMR work?)

WDS uses webpack’s watch mode. Thus when we added devServer to our webpack.config.js, we don’t need to specify watch:true in the configuration file.