Mixing
The internal of hot reloading
I have been using webpack hot reload in development and it is awesome. It saves me a lot of time. I have been searching over the web today to get a good grasp of how it actually works and have not found any good explanation about the internal working of it. So, I am asking here to get a good understanding of how it actually works.
I have come a bit in my mini hot reload project. For now, I have set up a node server and a simple client side Javascript code. The client is connected to the server via websocket and the server fires change events to client based on fs.watch function from node.jsthat watched my code folder for every file change.
I am stuck at how I can patch the update I recieve from server in client code. Right now, I have just index.js file in index.html. So I am wondering how bundling tools like webpack achieves hot reload, specifically how they patch the update.
I've read from webpack docs that they have a thin hrm runtime in client code that update the patch, but I could not seem to find any detailed info on how they achieve this feat. Do they open the client index.js file using FileReader, read the file and write(?) back? Again, I do not have a clear understanding of how this works. So, if you guys could give me some direction, I could dig deeper into it.
So my question is, how do they patch(insert) the new code into the already existing client code which resides in index.js?
javascript node.js webpack websocket hot-reload
asked Nov 20 '18 at 11:14
notQnotQ
626
add a comment |
I have been using webpack hot reload in development and it is awesome. It saves me a lot of time. I have been searching over the web today to get a good grasp of how it actually works and have not found any good explanation about the internal working of it. So, I am asking here to get a good understanding of how it actually works.
I have come a bit in my mini hot reload project. For now, I have set up a node server and a simple client side Javascript code. The client is connected to the server via websocket and the server fires change events to client based on fs.watch function from node.jsthat watched my code folder for every file change.
I am stuck at how I can patch the update I recieve from server in client code. Right now, I have just index.js file in index.html. So I am wondering how bundling tools like webpack achieves hot reload, specifically how they patch the update.
I've read from webpack docs that they have a thin hrm runtime in client code that update the patch, but I could not seem to find any detailed info on how they achieve this feat. Do they open the client index.js file using FileReader, read the file and write(?) back? Again, I do not have a clear understanding of how this works. So, if you guys could give me some direction, I could dig deeper into it.
So my question is, how do they patch(insert) the new code into the already existing client code which resides in index.js?
javascript node.js webpack websocket hot-reload
asked Nov 20 '18 at 11:14
notQnotQ
626
That is tricky and flaky, i'm fighting to find a better solution to do this too. github.com/webpack/webpack/blob/master/lib/… this is the code that lives on the browser. github.com/webpack/webpack/blob/master/lib/… this is what controls the updates too
– PlayMa256
Nov 20 '18 at 11:18
@PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser?
– notQ
Nov 20 '18 at 11:21
it stats on line 547 i suppose. it plays withmoduleand also with the array of installed modules (aka webpackjsonp) on the browser.
– PlayMa256
Nov 20 '18 at 11:39
If you not tied to thewebpack-hot-middlewarean alternative could be the webpack-hot-client which uses more recent technologies and IMO easier to configure, and follow what it does and how.
– lependu
Nov 20 '18 at 11:58
@lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself.In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..
– notQ
Nov 20 '18 at 12:08
add a comment |
I have been using webpack hot reload in development and it is awesome. It saves me a lot of time. I have been searching over the web today to get a good grasp of how it actually works and have not found any good explanation about the internal working of it. So, I am asking here to get a good understanding of how it actually works.
I have come a bit in my mini hot reload project. For now, I have set up a node server and a simple client side Javascript code. The client is connected to the server via websocket and the server fires change events to client based on fs.watch function from node.jsthat watched my code folder for every file change.
I am stuck at how I can patch the update I recieve from server in client code. Right now, I have just index.js file in index.html. So I am wondering how bundling tools like webpack achieves hot reload, specifically how they patch the update.
I've read from webpack docs that they have a thin hrm runtime in client code that update the patch, but I could not seem to find any detailed info on how they achieve this feat. Do they open the client index.js file using FileReader, read the file and write(?) back? Again, I do not have a clear understanding of how this works. So, if you guys could give me some direction, I could dig deeper into it.
So my question is, how do they patch(insert) the new code into the already existing client code which resides in index.js?
javascript node.js webpack websocket hot-reload
asked Nov 20 '18 at 11:14
notQnotQ
626
I have been using webpack hot reload in development and it is awesome. It saves me a lot of time. I have been searching over the web today to get a good grasp of how it actually works and have not found any good explanation about the internal working of it. So, I am asking here to get a good understanding of how it actually works.
I have come a bit in my mini hot reload project. For now, I have set up a node server and a simple client side Javascript code. The client is connected to the server via websocket and the server fires change events to client based on fs.watch function from node.jsthat watched my code folder for every file change.
I am stuck at how I can patch the update I recieve from server in client code. Right now, I have just index.js file in index.html. So I am wondering how bundling tools like webpack achieves hot reload, specifically how they patch the update.
I've read from webpack docs that they have a thin hrm runtime in client code that update the patch, but I could not seem to find any detailed info on how they achieve this feat. Do they open the client index.js file using FileReader, read the file and write(?) back? Again, I do not have a clear understanding of how this works. So, if you guys could give me some direction, I could dig deeper into it.
So my question is, how do they patch(insert) the new code into the already existing client code which resides in index.js?
javascript node.js webpack websocket hot-reload
javascript node.js webpack websocket hot-reload
asked Nov 20 '18 at 11:14
notQnotQ
626
asked Nov 20 '18 at 11:14
notQnotQ
626
edited Nov 20 '18 at 11:23
notQ
asked Nov 20 '18 at 11:14
notQnotQ
626
asked Nov 20 '18 at 11:14
notQnotQ
626
asked Nov 20 '18 at 11:14
notQnotQ
626
626
That is tricky and flaky, i'm fighting to find a better solution to do this too. github.com/webpack/webpack/blob/master/lib/… this is the code that lives on the browser. github.com/webpack/webpack/blob/master/lib/… this is what controls the updates too
– PlayMa256
Nov 20 '18 at 11:18
@PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser?
– notQ
Nov 20 '18 at 11:21
it stats on line 547 i suppose. it plays withmoduleand also with the array of installed modules (aka webpackjsonp) on the browser.
– PlayMa256
Nov 20 '18 at 11:39
If you not tied to thewebpack-hot-middlewarean alternative could be the webpack-hot-client which uses more recent technologies and IMO easier to configure, and follow what it does and how.
– lependu
Nov 20 '18 at 11:58
@lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself.In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..
– notQ
Nov 20 '18 at 12:08
add a comment |
That is tricky and flaky, i'm fighting to find a better solution to do this too. github.com/webpack/webpack/blob/master/lib/… this is the code that lives on the browser. github.com/webpack/webpack/blob/master/lib/… this is what controls the updates too
– PlayMa256
Nov 20 '18 at 11:18
@PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser?
– notQ
Nov 20 '18 at 11:21
it stats on line 547 i suppose. it plays withmoduleand also with the array of installed modules (aka webpackjsonp) on the browser.
– PlayMa256
Nov 20 '18 at 11:39
If you not tied to thewebpack-hot-middlewarean alternative could be the webpack-hot-client which uses more recent technologies and IMO easier to configure, and follow what it does and how.
– lependu
Nov 20 '18 at 11:58
@lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself.In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..
– notQ
Nov 20 '18 at 12:08
That is tricky and flaky, i'm fighting to find a better solution to do this too. github.com/webpack/webpack/blob/master/lib/… this is the code that lives on the browser. github.com/webpack/webpack/blob/master/lib/… this is what controls the updates too
– PlayMa256
Nov 20 '18 at 11:18
That is tricky and flaky, i'm fighting to find a better solution to do this too. github.com/webpack/webpack/blob/master/lib/… this is the code that lives on the browser. github.com/webpack/webpack/blob/master/lib/… this is what controls the updates too
– PlayMa256
Nov 20 '18 at 11:18
@PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser?
– notQ
Nov 20 '18 at 11:21
@PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser?
– notQ
Nov 20 '18 at 11:21
it stats on line 547 i suppose. it plays with
module and also with the array of installed modules (aka webpackjsonp) on the browser.– PlayMa256
Nov 20 '18 at 11:39
it stats on line 547 i suppose. it plays with
module and also with the array of installed modules (aka webpackjsonp) on the browser.– PlayMa256
Nov 20 '18 at 11:39
If you not tied to the
webpack-hot-middleware an alternative could be the webpack-hot-client which uses more recent technologies and IMO easier to configure, and follow what it does and how.– lependu
Nov 20 '18 at 11:58
If you not tied to the
webpack-hot-middleware an alternative could be the webpack-hot-client which uses more recent technologies and IMO easier to configure, and follow what it does and how.– lependu
Nov 20 '18 at 11:58
@lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself.
In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..– notQ
Nov 20 '18 at 12:08
@lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself.
In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..– notQ
Nov 20 '18 at 12:08
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391781%2fthe-internal-of-hot-reloading%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391781%2fthe-internal-of-hot-reloading%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
That is tricky and flaky, i'm fighting to find a better solution to do this too. github.com/webpack/webpack/blob/master/lib/… this is the code that lives on the browser. github.com/webpack/webpack/blob/master/lib/… this is what controls the updates too
– PlayMa256
Nov 20 '18 at 11:18
@PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser?
– notQ
Nov 20 '18 at 11:21
it stats on line 547 i suppose. it plays with
moduleand also with the array of installed modules (aka webpackjsonp) on the browser.– PlayMa256
Nov 20 '18 at 11:39
If you not tied to the
webpack-hot-middlewarean alternative could be the webpack-hot-client which uses more recent technologies and IMO easier to configure, and follow what it does and how.– lependu
Nov 20 '18 at 11:58
@lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself.
In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..– notQ
Nov 20 '18 at 12:08