Refer to the good article I saw earlier on Webpack
Regarding # 8, “How does Webpack hot update work? There was some confusion in the sixth part of “Explain its principle”, so I made a demo to try it out, to check the hash in it, and also to verify what was said in it.
First, create a new vue project and open it. Open the browser and enter Google Developer Tools.
After the service starts, the Webpack server and the browser set up the Websocket and push a hash value.
– Check the Websocket, which will have the hash value pushed by the server (e487d4ACba3c261D8936).
– Modify the demo and switch to the browser with a hot update.
You can see that the hash in Websocket messages has changed (bD46921F462C00862BEC).
At the same time, two more requests were made:
The first is to receive up one step hash value passed to his new module, it through JsonpMainTemplate. Runtime sends an Ajax request to the server end, the server returns a json, the json contains all the hash value to update the module.
The second request is that after getting the updated list, the module requests again through JSONP to get the latest module code.
Let’s take a look at the two requests.
First request:
In this case, the browser sends the hash sent by the server via Websocket to the server after the demo modification, and returns the hash values of all modules that need to be updated (here is one module that needs to be updated).
Second request:
The names of the two requests are named after the hash (e487d4ACba3c261D8936) sent from the previous Websocket: E487d4acba3c261d8936. Hot – update. Json and index e487d4acba3c261d8936. Hot – update. Js. Then JsonpMainTemplate. Runtime to Webpack parameter on the request of a service is a new update modules hash value.
Also, each change overwrites the last packaged code, and the hash value of the packaged file changes each time. Reversing the rollback also generates a hash.
The first time to write an article in nuggets, please criticize and correct. Write more in the future.