New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hot Module Replacement #26
Comments
Interesting. I am using the LiveReload app, which does full page refresh operations a lot, but that doesn't bother me. I am also using Problems:
|
The "prototype" is For webpack I plan to offer polling (every 10 minutes in production should be not problem, an update is not so important) and manual checking (so you could send a event if you have already some kind of bidirectional connection). The grunt task does nothing special. It just runs webpack. (grunt's watch task is worse than webpack's) Full page refreshing is already availible through the The impl plan is to emit special update files to the output directory, which contain all info regarding the update. There will be one main update file The client can check existance of the main update file and download it. Than it can download the needed update chunks. When this is finished an update is availible and can be applied. If it can't be applied the app may display some info to do a whole page refresh. To create these update files webpack need to know old module ids, old content hashes and the old bundle hash. So we need to use a hot reploading file which stores the info ( |
This feature is really crazy ^^ |
Yes it's crazy... Here is more explanation: All goals above have been reached. Only modules (or module chains) which have opt-it (using the module API) can be replaced. An update will abort if any updated module havn't opt-in. One can use the management API to start an update: If no update found Elsewise it will download hot update chunks for each loaded chunk. After the update have been downloaded, the hot replacement code will determine modules that will be renewed. Then:
API: https://github.com/webpack/docs/wiki/hot-code-replacement It must be globally enabled with If one don't write own management api code, one can use prepared code in the webpack/hot folder:
Simple add it as entry: module.exports = {
entry: ["webpack/hot/poll?600000", "./entry.js"]
// ...
};
The So a stylesheet can be changed without a full page refresh and tests with changed dependencies rerun. TODOs:
|
so integrated in my app at the page router with 10 LOC... App can update itself without full page refresh... Thanks to @Phoscur for proposing the best feature ever! 😄 |
added a demo to http://webpack.github.io/example-app/ there are 2 updates.... you can apply them with the two buttons on the right. |
Here is a graphical example: Compile timeLeft: first compilation RuntimeAssuming module 4 accepts itself and module 2 accepts module 3.
|
Thank you for doing this. |
Reloading the whole page on bundle update is ok, but a far time goal is to replace modules on runtime. (Idea from #25)
It's a far time goal, but it may be good to start discussion early...
Steps:
Goals:
Problems:
The text was updated successfully, but these errors were encountered: