webpackDevServer持续控制台:到“ws://本地主机:3003/ws”的WebSocket连接失败

bejyjqdl  于 2022-12-19  发布在  Webpack
关注(0)|答案(2)|浏览(412)

我会配置并启动我的本地webpackDevServer的React项目,它显示在浏览器页面上很好,但当我打开我的开发工具,它只是不断控制台以下错误,显然,webpackDevServer是断开连接,并重新连接一次又一次。
js:13到“ws://本地主机:3003/ws”的网络套接字连接失败:[webpack-dev-server]事件{受信任:真,请键入:“错误”,目标:WebSocket,当前目标:WebSocket,事件阶段:2,...} console error info image
我的本地配置信息如下。

网络包配置开发js

const path = require('path');
const paths = require('./paths.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

开始.js

"use strict";

const Webpack = require("webpack");
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require("../config/webpack.config.dev");

const compiler = Webpack(webpackConfig);
const devServerOptions = { ...webpackConfig.devServer, open: true };
const server = new WebpackDevServer(devServerOptions, compiler);

server.startCallback(() => {
  console.log('Successfully started server on http://localhost:3003');
});

包.json-〉脚本

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

我已经将devServer端口配置为3003。
有没有人可以给予我一些指导如何解决这个问题?真的很期待你的答案!

7gcisfzg

7gcisfzg1#

尝试正确配置devServer.host,这对我的情况有效。

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

bpzcxfmw2#

在生产模式下尝试:

devServer: {
  webSocketServer: false,
}

为我工作

相关问题