使用codesandbox.io开启Web云开发

codesandbox.io

使用Github账号登录codesandbox.io, 点击浏览器右上角+号安装Chrome扩展应用, 我们就有了一个和本地VS Code一样体验的IDE, 还能在桌面快捷方式快速打开应用:

启用VIM扩展

在Chrome应用中我们可以使用全部的VIM按键, ^W再也不会关闭浏览器窗口了!

配置webpack-dev-server

Invalid Host header错误

新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。disableHostCheck: true即可禁用该功能

热重启错误

由于热重启代码默认从https://localhost:port获取/sockjs-node/info, 得到的只会是404, 因此需要指定: public: '0.0.0.0:0', 这时URL将被修正为文档对应的主机和端口, 遗憾的是--open在Windows下将无法工作, 因为浏览器无法打开0.0.0.0域, 你需要将其手动修改为localhost

  devServer: {
    contentBase: DIR_DIST,
    https: false,
    disableHostCheck: true, // 禁用域名检测, 以开启跨域资源访问
    public: "0.0.0.0:0", // 指定资源URL跟随HTML文档的当前URL计算
  },