首页 > 关于 webpack-dev-server 中 html 文件的自动刷新

关于 webpack-dev-server 中 html 文件的自动刷新

背景:


问题:


也许你需要这个插件
https://github.com/ampedandwired/html-we...
支持根据模板自动生成html(修改自动更新不在话下),自动载入build后的style、js文件。


首先要理解 webpackhmr (Hot Module Replacement):

HMR is a way of exchanging modules in a running application (and adding/removing modules). You basically can update changed modules without a full page reload.

可以看出所谓模块热替换指的是页面在尽量不经过刷新的情况下将页面所引用的js或css等模块进行热替换。这里之所以说是尽量不经过刷新页面是因为webpack在热替换检查失败的情况会刷新整个页面,可以参见源码:https://github.com/webpack/webpack/blob/...

所以如果想让页面进行刷新可以采用下面几种方法:

  1. 让页面也成为模块,具体做法就是在页面的入口js文件里require页面的html,可参见Demo:https://github.com/AriaFallah/WebpackTut...

  2. 修改hot check强制reload整个页面(PS: 这种仍然没法监听页面变动)

  3. 通过其他方式来做,如: https://github.com/mklabs/tiny-lr 或 https://www.npmjs.com/package/livereload


你可以吧你想要hot reload的文件夹手动添加

$ webpack-dev-server --content-base folder/
【热门文章】
【热门文章】