javascript - What exactly is Hot Module Replacement in Webpack? -

i've read few pages hot module replacement in webpack.
there's sample app uses it.

i've read of , still don't idea.

what can it?
supposed used in development , not in production?
livereload, have manage yourself?
webpackdevserver integrated in way?

suppose want update css (one stylesheet) , js modules when save them disk, without reloading page , without using plugins such livereload. hot module replacement can me with? kind of work need do, , hmr provide?

first want note hot module replacement (hmr) still experimental feature.

hmr way of exchanging modules in running application (and adding/removing modules). can update changed modules without full page reload.

documentation

prerequirements:

• using plugins: http://webpack.github.io/docs/using-plugins.html
• code splitting: http://webpack.github.io/docs/code-splitting.html
• webpack-dev-server: http://webpack.github.io/docs/webpack-dev-server.html

it's not hmr, here links:

• example: http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
• api: http://webpack.github.io/docs/hot-module-replacement.html

i'll add these answer documentation.

how work?

from app view

the app code asks hmr runtime check of updates. hmr runtime downloads updates (async) , tell app code update available. app code asks hmr runtime apply updates. hmr runtime applies update (sync). app code may or may not require user interaction in process (you decide).

from compiler (webpack) view

in addition normal assets compiler need emit "update" allow updating previous version version. "update" contains 2 parts:

1. the update manifest (json)
2. one or multiple update chunks (js)

the manifest contains new compilation hash , list of update chunks (2.).

the update chunks contains code updated modules in chunk (or flag if module removed).

the compiler addtionally makes sure module , chunk ids consistent between these builds. uses "records" json file store them between builds (on store them in memory).

from module view

hmr opt-in feature, affects modules contains hmr code. documentation describes api available in modules. in general module developer writes handlers called when dependency of module updated. can write handler called when module updated.

in cases it's not mandatory write hmr code in every module. if module has no hmr handlers update bubbles up. means single handler can handle update complete module tree. if single module in tree updated, complete module tree reloaded (only reloaded not transferred).

from hmr runtime view (technical)

for module system runtime additional code emitted track module parents , children.

on management side runtime supports 2 methods: check , apply.

a check http request update manifest. when request fails, there no update available. elsewise list of updated chunks compared list of loaded chunks. each loaded chunk corresponding update chunk downloaded. module updates stored in runtime update. runtime switches ready state, meaning update has been downloaded , ready applied.

for each new chunk request in ready state update chunk downloaded.

the apply method flags updated modules invalid. each invalid module there need update handler in module or update handlers in every parent. else invalid buddles , mark parents invalid too. process continues until no more "bubble up" occurs. if bubbles entry point process fails.

now invalid modules disposed (dispose handler) , unloaded. current hash updated , "accept" handlers called. runtime switches idle state , continues normal.

what can it?

you can use in development livereload replacement. webpack-dev-server supports hot mode try update hmr before trying reload whole page. need add webpack/hot/dev-server entry point , call dev-server --hot.

you can use in production update mechanisms. here need write own management code integrates hmr app.

some loaders generate modules hot-updateable. i. e. style-loader can exchange stylesheet. don't need special.

suppose want update css (one stylesheet) , js modules when save them disk, without reloading page , without using plugins such livereload. hot module replacement can me with?

yes

what kind of work need do, , hmr provide?

here little example: http://webpack.github.io/docs/hot-module-replacement-with-webpack.html

a module can updated if "accept" it. need module.hot.accept module in parents or parents of parents... i. e. router place or subview.

if want use webpack-dev-server, add webpack/hot/dev-server entry point. else need hmr management code calls check , apply.

opinion: makes cool?

• it's livereload every module kind.
• you can use in production.
• the updates respect code splitting , download updates used parts of app.
• you can use in part of application , doesn't affect other modules
• if hmr disabled hmr code removed compiler (wrap in if(module.hot)

caveats

• it's experimental , not tested well.
• expect bugs
• theoretically usable in production, maybe use serious
• the module ids need tracked between compilations need store them (records)
• optimizer cannot optimize module ids anymore after first compilation. bit impact on bundle size.
• hmr runtime code increase bundle size.
• for production usage additional testing required test hmr handlers. pretty difficult.