不断收到[WDS]断开连接的错误，ReactJs，Webpack

Question

这个问题与帖子有关：Keep getting [WDS] Disconnected! error

我已根据答案更新了我的webpack配置设置，但是控制台仍然显示"[WDS] Disconnected! error"。

请问有什么建议吗？

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:8080/",
    "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")
        }
    })
]}

- vicgoyso

---

你能否尝试使用webpack-dev-server/client?localhost:8080/替换webpack-dev-server/client?http://127.0.0.0:8080/？看起来存在不匹配的问题。我建议以inline模式运行webpack-dev-server，以避免此类问题。 - Juho Vepsäläinen

嗨Juho，我已经尝试了两种路径，但是我得到了相同的错误，并且正如您在代码中所看到的，它已经在内联模式下运行。谢谢。 - vicgoyso

你应该选择一种方法，而不是同时使用两种方法。因此，要么设置这些条目，要么使用内联模式。 - Juho Vepsäläinen

当我将 "module : { loaders: [" 更新为 "module : { loader: [" 时，它起作用了。 - vicgoyso

这个回答解决了你的问题吗？不断收到[WDS]断开连接的错误 - Michael Freidgeim

Answer 1

将传输模式更改为ws而不是"sock-js.node":-

devServer: {
        transportMode: 'ws', 
        injectClient: false,
      }

- Mehadi Hassan

---

它在火狐浏览器中完美解决了这个问题。我想知道为什么它不是默认设置。 - Víctor R. Escobar

Answer 2

通过启用错误叠加，这个问题将会被解决

overlay:true 在devServer对象中添加一个属性

devServer: {
    ...
    overlay: true,
}

点击此处获取更多信息 webpack-dev-server

- dipenparmar12