Question

我喜欢在Codeanywhere上加快我的开发/测试过程。

Codeanywhere的开发框为您提供了一些随机URL，供您的主机＆＃34;应用程序＆＃34; （即：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

启动开发服务器时，必须使用0.0.0.0选项将其主机IP配置为host。然后，在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

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

 "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",

等...

Answer 2

codeanywhere上的所有Web服务器都应设置为响应0.0.0.0:Port（在您的情况下为0.0.0.0:8080）。您可能需要配置您的webapp，以便它不会指向localhost。

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

查看自己的网络

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

2 个答案:

实施例