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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/36917722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 19:42:56  来源:igfitidea点击:

Keep getting [WDS] Disconnected! error

javascriptnode.jsreactjs

提问by meji

enter image description here

enter image description here

I'm currently getting started on ReactJs. However, I've come across the following error in the console which doers not show in the terminal:

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

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

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

[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=1461853324372net::ERR_CONNECTION_TIMED_OUT

It's looking for "sockjs-node" which I've installed locally and globally, however no change. Shouldn't it be searching the "node_modules" folder?

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

Here is my configuration:

这是我的配置:

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")
            }
        })
    ]

}

Any help is appreciated, and thanks in advance.

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

回答by VvV

I fixed it like this;

我是这样修的;

as-is :

原样:

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

to-be :

成为 :

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

回答by Paras Dahal

The problem seems to be that you have not included the port number in url webpack-dev-server/client?http://127.0.0.0/

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

Change This

改变这个

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

To:

到:

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

回答by Arlei F. Farnetani Junior

To me, solved when I created a file: vue.config.jsin root project with content below:

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

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

回答by Rahul kalivaradarajalu

I am using angular and I use the webpack server as a dev-dependency. I was looking for an answer and couldn't find a suitable one for me.

我正在使用 angular,我使用 webpack 服务器作为开发依赖项。我正在寻找答案,但找不到适合我的答案。

Note: This is just a workaround and not a fix for the actual problem

注意:这只是一种解决方法,而不是解决实际问题的方法

open the following file

打开以下文件

YOUR_PROJECT_ROOT\node_modules\webpack-dev-server\client\index.js

YOUR_PROJECT_ROOT\node_modules\webpack-dev-server\client\index.js

in the method onSocketMsg, under the function ok()comment the line reloadApp().

onSocketMsg方法中,在函数 ok() 下注释 reloadApp() 行。

This prevents the app from reloading continuously. This stops the application from reloading even if you make your changes. But you can always reload your browser manually and your changes would reflect.

这可以防止应用程序不断重新加载。即使您进行了更改,这也会阻止应用程序重新加载。但是您始终可以手动重新加载浏览器,您的更改会反映出来。

回答by k1r8r0wn

In development.jsfile try to use the following settings for dev_server:

development.js文件中尝试使用以下设置dev_server

dev_server: {
    host: '127.0.0.0'
    port: 8080
    https: false
    disableHostCheck: true
}

回答by Luca Fagioli

In our case the issue was due to a mismatch between the host name that webpack-dev-serverwas using to serve the asset, and the host name the application was running from.

在我们的案例中,问题是由于用于webpack-dev-server提供资产的主机名与运行应用程序的主机名不匹配。

Specifically, our local application was running from https://dev.resumize.me, but webpack-dev-serverwas serving the asset from 127.0.0.1.

具体来说,我们的本地应用程序被运行https://dev.resumize.me,但是webpack-dev-server从服务的资产127.0.0.1

You can control the host name used by webpack-dev-serverwith the option --host. So in our case, we had to launch it with:

您可以使用webpack-dev-server选项控制所使用的主机名--host。所以在我们的例子中,我们必须使用以下命令启动它:

webpack-dev-server.js --host dev.resumize.me --https

webpack-dev-server.js --host dev.resumize.me --https

Hope this helps.

希望这可以帮助。

回答by dipenparmar12

This will be solved by Enabling Error Overlay,

这将通过启用错误叠加来解决,

overlay:trueinclude one more property in devServerobject

overlay:truedevServer对象中再包含一个属性

devServer: {
    overlay: true,
    contentBase: "./public",
    hot: true,    
    inline: true,
    quiet: false,
    noInfo: true,
    stats: { colors: true }
}

after change your webpack.config.js

更改 webpack.config.js 后

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: {
        overlay: true,
        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")
            }
        })
    ]

}

回答by Yuqiu G.

You don't need to change webpack.config.js

你不需要改变 webpack.config.js

Try fixing in package.json(start serveron port 3000 instead of standard8080):

尝试修复package.json(在端口 3000 而不是标准8080上启动服务器):

"start": "./node_modules/.bin/webpack-dev-server --host localhost --port 3000 --content-base src --inline --hot",

回答by max ivaneychyk

in index.htmchange path:

index.htm更改路径中:

   <link rel="stylesheet" href="./main.css">
   <script src="./main.js"></script>

to

   <link rel="stylesheet" href="/main.css">
   <script src="/main.js"></script>