我把它用作一个环境,一个云.io UbuntuVM Online IDE和我通过故障排除将此错误简化为只使用Webpack dev server运行应用程序.

我发布它的时候:

webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT

$IP是具有主机地址的变量 $PORT具有端口号.

我被指示在Cloud 9中部署应用程序时使用这些VAR,因为它们有默认的IP和端口信息.

服务器启动并编译代码,没问题,但它会显示索引文件.只有"无效主机标题"作为文本的空白屏幕.

请求如下:

GET / HTTP/1.1
Host: store-client-nestroia1.c9users.io
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Accept: 
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8

这是我的Package.json:

{
  "name": "workspace",
  "version": "0.0.0",
  "scripts": {
    "dev": "webpack -d --watch",
    "server": "webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Artur Vieira",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "file-loader": "^0.11.1",
    "node-fetch": "^1.6.3",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.9",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4",
    "whatwg-fetch": "^2.0.3"
  }
}

这是webpack.config.js:

const path = require('path');

module.exports = {

  entry: ['whatwg-fetch', "./app/_app.jsx"], // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
    // options related to how webpack emits results

    path: path.resolve(__dirname, "./public"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)

    filename: "bundle.js", // string
    // the filename template for entry chunks

    publicPath: "/public/", // string
    // the url to the output directory resolved relative to the HTML page
  },

  module: {
    // configuration regarding modules

    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "./app")
        ],
        exclude: [
          path.resolve(__dirname, "./node_modules")
        ],
        loader: "babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0",
        // the loader which should be applied, it'll be resolved relative to the context
        // -loader suffix is no longer optional in webpack2 for clarity reasons
        // see webpack 1 upgrade guide
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  },

  devServer: {
    compress: true
  }
}

由于我的主机设置,Webpack dev server正在返回此消息.在网页包dev server/lib/server中.js第60行.从https://github.com/webpack/webpack-dev-server

我的问题是如何设置以正确通过此判断.任何帮助都将不胜感激.

推荐答案

我发现,我需要将devServer的public属性设置为请求的主机值.因为它将显示在该外部地址.

所以我需要把这个放在我的网页里.配置.js

devServer: {
  compress: true,
  public: 'store-client-nestroia1.c9users.io' // That solved it
}

另一个解决方案是在CLI上使用它:

webpack-dev-server --public $C9_HOSTNAME   <-- var for Cloud9 external IP

Javascript相关问答推荐

JavaScript Date对象在UTC中设置为午夜时显示不正确的日期

我可以后增量超过1(最好是内联)吗?

JS、C++和C#给出不同的Base 64 Guid编码结果

对象和数字减法会抵消浏览器js中的数字

为什么我的includes声明需要整个字符串?

Redux查询多个数据库Api reducerPath&

查找最长的子序列-无法重置数组

使用GraphQL查询Uniswap的ETH价格

使用原型判断对象是否为类的实例

如何在coCos2d-x中更正此错误

在数组中查找重叠对象并仅返回那些重叠对象

当用户点击保存按钮时,如何实现任务的更改?

有效路径同时显示有效路径组件和不存在的路径组件

警告框不显示包含HTML输入字段的总和

如何在脚本编译后直接将RxJ模块导入浏览器(无需Angel、webpack、LiteServer)

为什么这个最小Angular 的Licial.dev设置不起作用?

Firefox的绝对定位没有达到预期效果

Refine.dev从不同的表取多条记录

如何阻止外部脚本进入顶层导航

无法在Adyen自定义卡安全字段创建中使用自定义占位符