webpack-dev-server 编译但不刷新我的网络浏览器

问题描述

我正在尝试使用 webpack-dev-server 来热加载"我的 jsx 组件.这是我正在使用的命令:

I am trying to "hot-load" my jsx components by using webpack-dev-server. This is the command I am using:

bin/webpack-dev-server --host 0.0.0.0

当我保存我的 jsx 代码时，它会进行有趣的编译，但不会通知我的开发 Web 服务器更新发生了.我必须手动刷新浏览器才能反映更改.

When I save my jsx code, it interestingly compiles, but does not inform my development web server that the update took place. I have to manually refresh the browser for the change to be reflected.

我正在使用 docker，所以我怀疑它与网络问题有关.我注意到 webpack-dev-server 使用端口 3035，而我的 web 开发服务器使用端口 3000.

I am using docker, so I suspect that it has something to do with a network issue. I notice that webpack-dev-server uses port 3035 and my web development server uses port 3000.

问题，当 webpack-dev-server 编译完成后，它是否会打开一个到 webserver 的 socket 连接以使其刷新?

Question, when webpack-dev-server finishes compiling, does it open a socket connection to the webserver to make it refresh?

推荐答案

热模块替换 [HMR] 在 docker 中不起作用的原因是因为 Webpack 在目录中查找文件更改的方式，它使用 fsevent 和 inotify.这些是 webpack 用来监视指定目录中文件的模块.对于在docker镜像中使用webpack-dev-server，Mihail Ignatiev 和 HosseinAgha.

The reason why Hot module replacement [HMR] is not working in docker is because of the way Webpack looks for file changes in a directory, it uses fsevent and inotify. These are modules webpack uses to watch the files in a specified directory. For using webpack-dev-server in a docker image, its best explained by Mihail Ignatiev and HosseinAgha.

此外，您可以通过在 webpack.config.js 中指定来更改 webpack-dev-server 命令使用的端口号.

Also, you can change the port number the webpack-dev-server command uses by specifying it in the webpack.config.js.

var path = require('path');

module.exports = {
  // It can be changed using port key
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

为了回答您的问题，webpack-dev-server 将在您的包中包含一个脚本，该脚本连接到 websocket 以在您的任何文件发生更改时重新加载.--public 标志确保脚本知道在哪里寻找 websocket.服务器默认使用 8080 端口，因此我们也可以使用 --port cli 选项指定自定义端口.

To answer your question, webpack-dev-server will include a script in your bundle that connects to a websocket to reload when a change occurs in any of your files. The --public flag makes sure the script knows where to look for the websocket. The server will use port 8080 by default, so we can also specify a custom port using --port cli option.

此外，建议使用内联模式进行热重载，因为它包含来自 websocket 的 HMR 触发器.轮询模式可以用作替代，但需要一个额外的入口点，webpack/hot/poll?1000.您可以按如下方式使用它，

Also, inline mode is recommended for hot reload as it includes an HMR trigger from the websocket. Polling mode can be used as an alternative, but requires an additional entry point, webpack/hot/poll?1000.You can use it as follows,

webpack-dev-server --inline

要深入了解 webpack-dev-server 如何使用 websockets，您可以参考 官方文档.

For an in depth insight into how webpack-dev-server uses websockets, you can refer to the official documentation.

这篇关于webpack-dev-server 编译但不刷新我的网络浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！