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

Question

背景：

• 在webpack中，我们经常使用webpack-dev-server作为开发服务器，用于实时监听和打包编译静态资源（内存中），这样每当我们修改js、css等等文件时，客户端（如浏览器等）能够自动刷新页面，展示实时的页面效果。

• 这种方式非常适合多显示器下，前端界面的开发

---

问题：

• webpack-dev-server好像是只监听webpack.config.js中entry入口下文件（如js、css等等）的变动，只有这些文件的变动才会触发实时编译打包与页面刷新，而对于不在entry入口下的html文件，却不进行监听与页面自动刷新。

• 请问该如何才能使html的修改也能触发页面的自动刷新呢？

Answer 1

首先要理解 webpack 的 hmr （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

Answer 2

添加参数 watchContentBase: true，目录contentBase目录下的html文件变化也可监听并刷新

  devServer: {
    port: 9000,
    hot: true,
    contentBase: path.join(__dirname, '/example'),
    watchContentBase: true,
  },

Answer 3

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

$ webpack-dev-server --content-base folder/

Answer 4

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

Answer 5

我用的是gulp的watch，看我的代码 https://github.com/yinfxs/f7-...

Answer 6

实现对静态文件（html,css,js等）的监听以自动刷新浏览器，建议使用gulp。
gulp官方提供了对该功能实现的例子。
也可以参考这个demo。

Answer 7

我自己写了个webpack的插件， 不用生成文件到硬盘，监听html-webpack-plugin的hook，模板文件改变时使浏览器自动刷新，大家可以看看。https://github.com/zsy1993/re...

Answer 8

https://github.com/jantimon/h... 这个是你需要的 html-webpack-plugin官方提供的 一个配置高度