我正在使用Cloud9.io ubuntu VM Online IDE作为环境,并且通过对该错误进行故障排除而减少了使用Webpack开发服务器运行应用程序的速度。
我用以下命令启动它:
webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT
$ IP是具有主机地址的变量,$ PORT具有端口号。
我被指示在Cloud 9中部署应用程序时使用这些var,因为它们具有默认的IP和PORT信息。
服务器启动并编译代码,没问题,虽然它 没有 显示索引文件。只有空白屏幕,“无效的主机头”为文本。
这是请求:
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开发服务器由于我的主机设置而返回此消息。在webpack-dev-server / lib / Server.js第60行中。来自https://github.com/webpack/webpack-dev- server
我的问题是如何设置才能正确通过此检查。任何帮助将不胜感激。
我发现,需要将publicdevServer 的属性设置为请求的主机值。由于它会显示在该外部地址。
public
所以我需要在我的webpack.config.js中
devServer: { compress: true, public: 'store-client-nestroia1.c9users.io' // That solved it }
另一个解决方案是在CLI上使用它:
webpack-dev-server –public $ C9_HOSTNAME <-用于Cloud9外部IP的var