使用 webpack 重新加载实时 html答案

【问题标题】：live html reload with webpack使用 webpack 重新加载实时 html
【发布时间】：2015-04-20 19:53:44
【问题描述】：

抱歉这个菜鸟问题（我还是 webpack 的新手）我对实时重新加载我的 html 很感兴趣，这意味着，每次我对我的 html 文件进行更改时，我的浏览器都必须显示最新的更改，webpack 有一个比 javascript 更好的功能，可以与 html 一起使用吗？

刚才我正在使用这个骨架 https://github.com/gaearon/react-hot-boilerplate 进行开发，是的，我正在使用 react，但我也在构建一些静态页面

我知道像 live.js 这样的库，但我发现它不是那么透明：这会重新加载我的浏览器，这几秒钟是空的，而不是括号（对于 html）和 webpack（对于 js）几乎是即时的，而你没有感觉浏览器重新加载，像这样的 webpack 之外的替代方案也将不胜感激，谢谢

【问题讨论】：

您应该使用带有热加载选项的 webpack-dev-server 它重新加载所有内容。告诉我你需要如何使用它的例子。
感谢您的回复..是的，您可以告诉我如何为此配置github.com/gaearon/react-hot-boilerplate，刚才我已经为 js/jsx 文件重新加载但不是为 html，请注意它似乎使用节点 server.js 完成（不确定，但基于 ths 文件github.com/gaearon/react-hot-boilerplate/blob/master/…）..

标签： javascript html web webpack

【解决方案1】：

经过几个小时的谷歌搜索，我终于找到了答案。只需添加此配置：

devServer: {
  before(app, server) {
    const chokidar = require('chokidar');
    chokidar.watch('path/to/my-files/').on('all', function (event, path) {
      server.sockWrite(server.sockets, 'content-changed');
    });
  },
}

在博客上找到它：https://daltontan.com/easiest-way-to-reload-webpack-dev-server-when-other-files-change/30

【讨论】：