API - Hot Module Reloading

[bebraw]

Describe the hot module reloading interface and how it works in this article.

[SpaceK33z]

Also note that we need to be very clear on the differences in the CLI and the Node.js API. --hot automatically adds the HMR plugin, while hot: true in the API does not.

Ultimately, there shouldn't be any differences. But meanwhile, we need to make this very clear.

[bebraw]

Yeah, problems like that become obvious with documentation. webpack 1 documentation actually covers these quite a bit, but I have a feeling we can be clearer on that. There are some related technical docs that should be ported over.

[skipjack]

So currently there is a concepts page for hmr and a hmr-react guide. It seems this issue is for creating a page documenting how to interact with hmr via node.

Maybe a short section on this page or creating a separate one would make sense? It is mentioned on the CLI page already.

[skipjack]

Also, @SpaceK33z a warning was added to the devserver configuration page 🎉 . Definitely tripped me up in the past, so I'm happy that's there now.

[tiye]

I ran into this issue too thheller/shadow-cljs#12 (comment)

From my side I think a minimal HMR example(and without React) would help a lot. I just find it problematic to make it really work correctly, but don't know what happened in my case.

[skipjack]

From my side I think a minimal HMR example(and without React) would help a lot. I just find it problematic to make it really work correctly, but don't know what happened in my case.

I completely agree and after finally getting react-hot-loader to work, I realized some of the things in the current HMR w/ React Guide aren't even necessary. Separating out the bare minimum to make it work, regardless of environment or framework, would definitely be really helpful and it's actually not that bad. If you're using webpack-dev-server, basically all you need to do is add:

import Webpack from 'webpack'

export default {
  // Rest of configuration...
  devServer: {
    hot: true,
    // ...
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    // ...
  ]
}

I might take a stab at some of this though I'll probably need some help from others who have more experience with the NodeJS interface for it.

[tiye]

I made one https://github.com/mvc-works/minimal-webpack-hmr but it does NOT work yet... Anyone please help fix it...?

---

updates: minimal-xyz/minimal-webpack-hmr#1

I think this piece of code is wrong not to require the module again after accepting changes:

https://webpack.js.org/guides/hmr-react/

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    // something is missing here!!! but there's still a chance it's built in some loaders or plugins
    render(App)
  });
}

---

updates, maybe it's ES6, I was told that ES does not have to require() again here...

[skipjack]

@jiyinyiyong your repository worked fine for me:

If it's not obvious, I kept changing console.log(...) statement in src/lib.js from "lib 6" to "lib 5" to "lib 4" and it re-ran the module every time.

Maybe you had an outdated dependency or something?