Enable hot-module reload

[fregante]

This demo video shows HMR of both React modules and CSS files, in the editor and in the options page:

Screen.Recording.2.mov

Questions

Thoughts? Should I flesh this out and document the new development usage? (i.e. do not use together with web-ext’s autoreload)

Keep in mind that the 4/5s delay is unrelated to this change. Here I'm just avoiding the need to refresh the editor/options to see any changes, which should speed development up considerably already.

Next

• Figure out the level support of content scripts
• Ensure these changes don't spill into production
• Test more
• Update web-ext run-related docs

Wishlist

• Profile webpack to improve its watch performance #1140

Related

• includes Bump webpack-target-webextension from 1.0.2 to 1.0.3 #2974
• mentioned in Background page is not automatically reloaded  #945
• depended on Add failing CSS part to HMR demo awesome-webextension/webpack-target-webextension#31

[twschiller]

Should I flesh this out and document the new development usage? (i.e. do not use together with web-ext’s autoreload)

I think this HMR would be very helpful for speeding up development. From a developer ergonomics perspective, I'd like to focus on error telemetry first. Then this would be a good one to enable after. I'm also working on selector specifications today to unblock that line or work

[fregante]

Closing until it becomes higher priority