webpack热替换心得

Posted 2020-10-17 申小贺

1.在webpack热替换中，修改文件后页面是进行局部刷新而不是重载页面。

2.在webpack热替换中，修改某一个文件后，该文件与相关的文件（即import该文件的文件）会进行替换，从而重新执行其中的代码。页面会进行局部刷新。

3.在webpack热替换中，如果一个文件（hello.js）被其他多个文件都引用了，则在引用该文件的任何一个文件中修改hello.js文件export出的对象，在其他文件中该对象都会被修改。也就是说一个文件中export出的对象属于全局对象，在其他任何地方通过对import该文件获得的输出对象都是该全局对象，对其修改实际上对这个全局变量进行修改，所以在其他页面获得这个输出对象时是更改后的对象。

4.在webpack热替换中，修改文件后会重新执行修改后的文件（即修改的文件和与其相关的文件），但这并不意味着之前的操作会撤销，也就是说会在之前的操作上再执行一遍修改后的文件。刷新浏览器可以去除这个影响，会根据现在的代码重新执行。