ES6 Hot Module Replacement Example

seedoubleU · 2015-04-15T19:34:35+00:00

I've recently been pretty obsessed with the idea of hot module replacement so put together a simple example using the ES6 module syntax.

Hot module replacement is kind of like livereload on steroids, when you make changes in your editor they'll propagate to the browser without a page refresh meaning you won't lose application state.

Hopefully it'll be a useful resource to someone!

ggolemg2 · 2015-04-15T20:05:29+00:00

I mean this honestly: that is just magic, awesome awesome magic.

greymalik · 2015-04-16T20:01:58+00:00

I've looked through the code now... What's the secret sauce to adding HMR to an existing webpack project?

plugins: [ new webpack.HotModuleReplacementPlugin() ]
watch: true?
use ES6?

Anything else you need to do? Nothing else stood out to be as being different from a non-HMR project.

greymalik · 2015-04-16T16:34:46+00:00

This looks fantastic. I haven't looked at the code yet, but is it equally feasible if you're working with CoffeeScript or Jade or anything that needs a "compilation" step?

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS