webpackDevServer 不断控制台：WebSocket 连接到“ws://localhost:3003/ws”失败

Question

我配置并启动我的本地基于 webpackDevServer 的 React 项目，它在浏览器页面上显示良好，但是当我打开我的开发工具时，它只是不断地控制台出以下错误，显然，webpackDevServer 一次又一次地断开连接并重新连接。

\n

WebSocketClient.js:13 WebSocket 连接到 \'ws://localhost:3003/ws\' 失败：\n[webpack-dev-server] Event\xc2\xa0{isTrusted: true, type: \'error\', target: WebSocket, currentTarget: WebSocket, eventPhase: 2,\xc2\xa0\xe2\x80\xa6}\n控制台错误信息图像

\n

\n

我的本地配置信息如下。

\n

\n

webpack.config.dev.js

\n

const path = require(\'path\');\nconst paths = require(\'./paths.js\');\nconst HtmlWebpackPlugin = require(\'html-webpack-plugin\');\n\nmodule.exports = {\n  mode: \'development\',\n  entry: {\n    index: \'./src/index.js\',\n  },\n  devServer:{\n    port: 3003\n  },\n  output: {\n    filename: \'[name].bundle.js\',\n  },\n  devtool: \'inline-source-map\',\n  module: {\n    rules: [\n      {\n        test: /\\.m?js$/,\n        exclude: /(node_modules|bower_components)/,\n        use: {\n          loader: \'babel-loader\',\n          options: {\n            presets: [\'@babel/preset-env\']\n          }\n        }\n      }\n    ]\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      title: \'Development\',\n      template: paths.appHtml\n    }),\n  ]\n};\n

\n

启动.js

\n

"use strict";\n\nconst Webpack = require("webpack");\nconst WebpackDevServer = require(\'webpack-dev-server\');\nconst webpackConfig = require("../config/webpack.config.dev");\n\nconst compiler = Webpack(webpackConfig);\nconst devServerOptions = { ...webpackConfig.devServer, open: true };\nconst server = new WebpackDevServer(devServerOptions, compiler);\n\nserver.startCallback(() => {\n  console.log(\'Successfully started server on http://localhost:3003\');\n});\n

\n

package.json->脚本

\n

  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "build": "node ./scripts/build.js",\n    "start": "node ./scripts/start.js"\n  }\n

\n

我已经将 devServer 端口配置为 3003。

\n

有人可以给我一些如何解决这个问题的指示吗？真心期待您的答复！

\n

Answer 1

尝试正确配置devServer.host。这对我的案例有用。

  devServer: {
    port: 3003,
    host: "127.0.0.1"  // <-- this
  },