webpack-dev-server的热更新问题

矫情吗；* 2022-03-28 02:54 180阅读 0赞

webpack配置如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1][]

目前dist下面的bundle.js是webpack打包的，

但是热更新所引用的bundle.js虽然名字一样，但是并不是看到的那个bundle.js，而是在当前路径下不可见的一个bundle.js

下面实验，证明index.html引用的不是可见的bundle.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 4][]

可以看到index.html下面没有bundle.js但是引用成功了

说明使用webpack.dev-server引用的路径是根据webpack打包文件名，在contentBase下生成同样的一个不可见的文件，而index.html是引用的这个不可见文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 5][]

参考文献：

[https://segmentfault.com/a/1190000006670084][https_segmentfault.com_a_1190000006670084]

[https://www.cnblogs.com/penghuwan/p/6941616.html][https_www.cnblogs.com_penghuwan_p_6941616.html]

[https://segmentfault.com/a/1190000006178770?utm\_source=tag-newest\#articleHeader2][https_segmentfault.com_a_1190000006178770_utm_source_tag-newest_articleHeader2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: /images/20220328/3b05e2000c884e80bcce550e485847e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1]: /images/20220328/ab809e728e184c5cad66cc68d5e3c61e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2]: /images/20220328/5db7d3f1b61f4a92bbe1f7247f5ce880.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 3]: /images/20220328/7dbaf27eae6e48879bb9ac64f22ed0c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 4]: /images/20220328/de45b332d301416fa2880e359cb7d17f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 5]: /images/20220328/f5cfd30a709f4ff7af324e9249ab9451.png
[https_segmentfault.com_a_1190000006670084]: https://segmentfault.com/a/1190000006670084
[https_www.cnblogs.com_penghuwan_p_6941616.html]: https://www.cnblogs.com/penghuwan/p/6941616.html
[https_segmentfault.com_a_1190000006178770_utm_source_tag-newest_articleHeader2]: https://segmentfault.com/a/1190000006178770?utm_source=tag-newest#articleHeader2