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

【问题标题】：Why does webpack dev server not auto reload page on changes when started from gitpod terminal?为什么 webpack 开发服务器从 gitpod 终端启动时不会自动重新加载更改页面？
【发布时间】：2020-10-13 13:43:58
【问题描述】：

项目是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 窗口还是在完整的浏览器选项卡中打开它）。如果我手动重新加载，则会反映更改。

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

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

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

在 gitpod 终端输入：

npm install
npm run build
npm run start

【问题讨论】：

标签： webpack-dev-server reload gitpod

【解决方案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

【讨论】：

像魅力一样工作。非常感谢。
有一点需要注意的是，它破坏了 netlify 构建，因为 require('child_process').execSync('gp url 8080') 不会在那里工作（gp 未知）。解决方案是在 try 块中确定该值并让它在 netlify 上失败（没有区别，因为它只是一个开发配置）。