不断让 [WDS] 断开连接!错误

IT技术 javascript node.js reactjs
2021-05-02 01:53:47

在此处输入图片说明

我目前正在开始使用 ReactJs。但是,我在控制台中遇到了以下错误,但在终端中没有显示:

[WDS] Disconnected!sock.onclose @ client?64c0:70EventTarget.dispatchEvent @ eventtarget.js:49(匿名函数) @ main.js:356

抽象-xhr.js:128 GET http://127.0.0.0/sockjs-node/info?t=1461853324372 net::ERR_CONNECTION_TIMED_OUT

它正在寻找我在本地和全球安装的“sockjs-node”,但没有任何变化。不应该搜索“node_modules”文件夹吗?

这是我的配置:

var webpack = require("webpack");
var path = require("path");


module.exports = {

    devtool: "inline-source-map",
    entry: [
        "webpack-dev-server/client?http://127.0.0.0/",
        "webpack/hot/only-dev-server",
        "./src"
    ],
    devServer: {
        contentBase: "./public",
        hot: true,    
        inline: true,
        quiet: false,
        noInfo: true,
        stats: { colors: true }
    },
    output: {
        path: path.join(__dirname, "./public"),
        filename: "./assets/js/bundle.js"
    },
    resolve: {
        modulesDirectrories: ["node_modules", "src"],
        extentions: ["", ".js"]
    },
    module : {
        loaders: [
            { 
                test: /\.jsx?$/,
                exclude: "/node_modules/",
                loaders: ["react-hot-loader", "babel?presets[]=react,presets[]=es2015"] 
            }, 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }, 
            {
                test: /\.gif$/,
                loader: "url-loader?mimetype=image/png"
            }, 
            {
                test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "url-loader?mimetype=application/font-woff"
            }, 
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/,
                loader: "file-loader?name=[name].[ext]"
            }
        ]
    },
    plugins: [ 
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("development")
            }
        })
    ]

}

任何帮助表示赞赏,并提前致谢。

4个回答

我是这样修的;

原样:

  entry: [
    "webpack-dev-server/client?http://localhost:9090",
    "webpack/hot/only-dev-server",
    "./src/app"
  ],

成为 :

  entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080",
    "webpack/hot/only-dev-server",
    "./src"
  ],

对我来说,当我创建一个文件时解决了:vue.config.js在根项目中,内容如下:

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

我遇到了同样的错误,因为我的 Webpack 被配置为在localhost:3000,但我有一个本地端口重定向从803000,我正在使用http://localhost/. 但是在网络检查器中,我注意到 WDS 仍在查询http://localhost:3000/sockjs-node/info?...哪个超时。

解决方案是告诉 Webpack 你的应用程序的“公共”地址,在我的例子中是这样的:

devServer: {
      https: false,
      port: 3000,
      public: 'http://localhost:80'
    }

(注意: 的:80部分public是可选的,因为80它是默认值,但添加是为了清楚说明,即3000正在提供服务80的端口以及被重定向到它的端口。)

(不要问我为什么不使用port: 80它,这很复杂。但我希望我的回答有一天能帮助像我这样的人。)

问题似乎是您没有在 url 中包含端口号 webpack-dev-server/client?http://127.0.0.0/

改变这个

entry: [
    "webpack-dev-server/client?http://127.0.0.0/",
    "webpack/hot/only-dev-server",
    "./src"
],

到:

entry: [
    "webpack-dev-server/client?http://127.0.0.0:8080/",
    "webpack/hot/only-dev-server",
    "./src"
],