从gitpod终端启动时，为什么webpack开发服务器无法在更改时自动重新加载页面？

问题描述

项目为https://github.com/easychessanimations/htmltest。

我研究了与webpack开发服务器自动页面重新加载有关的所有答案。

当我在本地执行npm run start时，它会在源更改时自动构建/重新加载页面，因此开发服务器配置必须正确：

devServer: { 
    contentBase: path.join(__dirname,"dist"),port: 8080,hot: true,watchContentBase: true,watchOptions: {
        poll: true
    },},

当我从gitpod终端在线进行相同操作时，页面将自动重建，但不会自动重新加载（无论我是在gitpod窗口中还是在功能强大的浏览器选项卡中打开页面）。如果我手动重新加载，更改将得到反映。

我需要什么额外的配置才能使其在gitpod下工作？

您可以使用此链接使用它（当然，首先需要使用您的github帐户授权gitpod）：

https://gitpod.io/#https://github.com/easychessanimations/htmltest

在gitpod终端中输入：

npm install
npm run build
npm run start

解决方法

Webpack HMR需要进行相应的配置。 将以下三个属性添加到webpack.conf即可达到目的：

  devServer: { 
      // make HMR work - start
      host: '0.0.0.0',disableHostCheck: true,public: require('child_process').execSync('gp url 8080').toString().trim(),// make HMR work - end
      
      contentBase: path.join(__dirname,"dist"),port: 8080,hot: true,watchContentBase: true,watchOptions: {
          poll: true
      },},

以下是有效的快照：

https://gitpod.io/#snapshot/daa14130-2f44-430d-93ab-2d4ed980fc2c