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

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

项目是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

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