为什么 webpack dev 服务器在从 gitpod 终端启动时不会自动重新加载更改页面？

Question

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

我研究了所有与 webpack dev server auto page reload 相关的答案。

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

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

当我从 gitpod 终端在线执行相同操作时，页面会自动重建，但不会自动重新加载（无论我是在 gitpod window 还是在完整的浏览器选项卡中打开它） .如果我手动重新加载，更改会反映出来。

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

你可以使用这个 link 来玩弄它（当然首先你需要用你的 github 帐户授权 gitpod）：

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

在 gitpod 终端输入：

npm install
npm run build
npm run start

Answer 1

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

为什么 webpack dev 服务器在从 gitpod 终端启动时不会自动重新加载更改页面？

Why does webpack dev server not auto reload page on changes when started from gitpod terminal?

webpack-dev-server

reload

gitpod