React + webpack 热更新后修改了样式文件，但是不能及时生效的解决办法

Posted 2023-05-08

参考技术A 使用了webpack的热更新后，修改样式文件，不能热更新到样式文件上，只能打包到服务器上，样式文件才会生效。
具体的原因是因为我将样式文件和js文件分开了，所以样式文件不会生效。
解决办法就是在开发环境中将样式文件和js文件合并，正式环境中再 将其分开。

这里我将css分离、文件规则等配置分离到其他js中，这里就写了样式文件。

webpack热替换心得

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

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

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

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