4

由于 html-webpack-plugin 和 webpack-dev-middleware (webpack-hot-middleware) 互操作中的 HMR 错误,我想在我的 html 文件更改(在开发时)时重新加载页面。

这是我遇到此问题的两个存储库,两者都有问题。


如何使用此工具重新加载页面?

  • 节点.js
  • 表达
  • webpack-dev-中间件
4

1 回答 1

6

有几种方法可以从服务器刷新客户端的浏览器。

服务器发送事件:

一种跨浏览器和服务器工作的简单方法使用服务器发送事件。最小的过程是:

  1. 客户端使用EventSource()向服务器发送订阅请求:
var evtSource = new EventSource("<server_URL>/subscribe");
  1. 客户端为传入消息设置侦听器:
evtSource.onmessage = function () { myPageRefresh() };

在服务器端,为请求设置处理程序GET /subscribe并跟踪订阅的客户端:

var client = null;
app.get('/subscribe', (req, res) => {
  // send headers to keep connection alive
  const headers = {
    'Content-Type': 'text/event-stream',
    'Connection': 'keep-alive',
    'Cache-Control': 'no-cache'
  };
  res.writeHead(200, headers);

  // send client a simple response
  res.write('you are subscribed');

  // store `res` of client to let us send events at will
  client = res;

  // listen for client 'close' requests
  req.on('close', () => { client = null; }
});

// send refresh event (must start with 'data: ')
function sendRefresh() {
  client.write('data: refresh');
}

现在服务器可以随时通过简单地调用来发送刷新事件sendRefresh()

精简服务器:

如果您在开发计算机上本地运行服务器,刷新浏览器非常简单。lite-server是一个模块,它会在检测到源文件发生更改时刷新浏览器。它非常方便。

于 2020-02-07T17:03:48.617 回答