webpack-dev-server编译成功但无法刷新我的网页浏览器

Question

我正在尝试使用webpack-dev-server来“热加载”我的jsx组件。这是我使用的命令：

bin/webpack-dev-server --host 0.0.0.0

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

我正在使用docker，因此我怀疑这与网络问题有关。我注意到webpack-dev-server使用端口3035，而我的Web开发服务器使用端口3000。

问题是，当webpack-dev-server完成编译后，它是否会打开一个套接字连接到Web服务器以使其刷新？

- Steve Quezadas

---

你的浏览器控制台显示了什么？（F12 > 控制台） - Loïc

Answer 1

热模块替换 [HMR] 在 Docker 中无法正常工作的原因是由于 Webpack 查找目录中文件更改的方式，它使用了 fsevent 和 inotify 模块。这些是 webpack 用来监视指定目录下文件的模块。关于如何在 Docker 镜像中使用 webpack-dev-server，可以参考 使用webpack-dev-server的最佳实践 ，其中有 Mihail Ignatiev 和 HosseinAgha 的详细解释。

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

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会在你的bundle中包含一个脚本，该脚本连接到websocket以在任何文件发生更改时重新加载。--public标志确保脚本知道在哪里查找websocket。服务器默认使用端口8080，因此我们还可以使用--port cli选项指定自定义端口。

另外，内联模式建议用于热重载，因为它包括来自websocket的HMR触发器。轮询模式可用作替代方案，但需要额外的入口点webpack/hot/poll?1000。您可以按以下方式使用它。

webpack-dev-server --inline

如果您想深入了解webpack-dev-server如何使用WebSockets，请参考官方文档。

- Shujath

Answer 2

对于任何在使用Webpack 5时遇到此问题的人，您需要将以下行添加到您的webpack配置文件中：target:web，如这里所述。

- Abe Caymo

Answer 3

我已经找到了解决自己问题的答案。需要打开并对Web浏览器可用的3035端口才能使热加载正常工作，尽管我不知道具体细节。

好的，我发现在我的特定配置中有三个问题。首先，需要加载“web-dev-server”才能使热加载正常工作。因此，我的Procfile.dev-hmr如下所示：

web: bundle exec rails s -b 0.0.0.0 -p 3000  
webpack-dev-server: bin/webpack-dev-server

我像下面这样加载这个文件：

foreman start -f Procfile.dev-hmr

其次，webpack-dev-server 运行在 3035 端口上，因此您需要在 Docker 上打开该端口。我使用以下 docker-compose 文件的“port”命令来完成这个操作：

version: '3'
services:
    db:
      image: postgres:9.3
      ports:
        - "5432:5432"
      volumes:
        - ./tmp/db:/var/lib/postgresql/data
    web:
      build: .
      command: foreman start -f Procfile.dev-hmr
      volumes:
        - .:/myapp
      expose:
        - 3000
        - 3035
      ports:
        - "3000:3000"
        - "3035:3035"
      depends_on:
        - db
      user: "1000:1000"
      environment:
        - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

3. 我必须将webpacker的服务器主机设置为“0.0.0.0”（我想这是因为docker使用了一些奇怪的IP地址）。我通过设置环境变量来实现这一点：WEBPACKER_DEV_SERVER_HOST=0.0.0.0

我能够在上述docker-compose.yml脚本中完成此操作。

- Steve Quezadas