Codeanywhere 中的 webpack-dev-server 实时更新

Question

我很想加快我在 Codeanywhere 上的开发/测试过程。

Codeanywhere 的开发箱给你一些随机 URL 用于你的主机 "application"（即：index.html），如下所示：

http://preview.[really-long-hash].box.codeanywhere.com/build/

不知道如何从那里到达 webpack-dev-server 如果它是运行。是否缺少我缺少的基本配置？

在所有 Webpack 教程中，如果您是运行在本地，您将像这样访问运行开发服务器：http://localhost:8080 但 http://preview.[really-long-hash].box.codeanywhere.com:8080 只是显示来自 Codeanywhere 的错误消息。

Answer 1

codeanywhere 上的所有 Web 服务器都应设置为响应 0.0.0.0:Port（在您的情况下为 0.0.0.0:8080）。您可能需要配置您的网络应用程序，使其不指向本地主机。

启动您的网络应用程序后，您可以在 http://preview.[really-long-hash].box.codeanywhere.com:8080

查看您的网站

Answer 2

启动 dev-server 时，您必须使用 host 选项将其主机 IP 配置为 0.0.0.0。然后，在 codeanywhere 上，您可以从 http://preview.[really-long-hash].box.codeanywhere.com:8080.

访问它

另一个注意事项是，如果您的构建文件夹不是您调用 webpack-dev-server 的文件夹的根目录，您还应该使用 content-base 选项指定它。

示例：

webpack-dev-server --devtool eval --host 0.0.0.0 --progress --colors --hot --content-base build

请注意，如果您厌倦了每次都输入此内容，请通过编辑您的 package.json 文件并在 scripts 中添加一个条目来配置 npm 脚本，例如：

 "main": "main.js",
  "scripts": {
    "test" : "echo \"Error: no test specified\" && exit 1",

    "build" : "webpack --progress -colors",
    "dev-server" : "webpack-dev-server --devtool eval --host 0.0.0.0 --progress --colors --hot --content-base build"
  },
  "repository": {
    "type": "git",

等...

Codeanywhere 中的 webpack-dev-server 实时更新

Webpack-dev-server live update in Codeanywhere

webpack

webpack-dev-server

codeanywhere

示例：