Search code examples
webpackwebpack-hmr

Am I missing anything for Webpack HMR?


I have been experimenting with Webpack since about two years now and have switched all my new development from Gulp to Webpack. Since then I have been hesitant to add code to my source files specifically for HMR logic but later found out that the below works for all my source files with effectively just three lines at the end of my source entry point:

if (module.hot) {
    module.hot.accept();
}

The above three lines have been working perfectly (at least for the use-cases that I have come across), where you do not have to specify individual files in the accept call. All my JavaScript (as far as I know) and CSS is being replaced in the browser almost instantaneously without a reload, which is far better than an arrangement to have live-reloads in the browser and lose the entire application state on every file save.

The question is, what is the purpose of libraries like react-hot-loader, vue-hot-loader and angular-hot-loader when (as far as I think) HMR seems to work just by following the guide at https://webpack.js.org/guides/hot-module-replacement on the official website?


Solution

  • I'm still not able to realize the importance of such hot-loading modules and as everything seems to work as expected, I conclude that my implementations are just fine without them, until someday in the future when (and if) I'll learn otherwise.