0

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

1 回答 1

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

于 2020-10-13T14:14:26.063 回答