继续让 [WDS] 断开连接！错误，ReactJs，Webpack答案

【问题标题】：Keep getting [WDS] Disconnected! error, ReactJs, Webpack继续让 [WDS] 断开连接！错误，ReactJs，Webpack
【发布时间】：2017-01-10 12:49:27
【问题描述】：

这个问题与帖子有关：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")
        }
    })
]}

【问题讨论】：

你可以试试webpack-dev-server/client?localhost:8080/ 而不是webpack-dev-server/client?http://127.0.0.0:8080/ 吗？好像有不匹配的地方。我建议在 inline 模式下运行 webpack-dev-server 以避免此类问题。
嗨 Juho，我已经尝试了这两种路径，但是我得到了同样的错误，正如你在代码中看到的那样，它已经在内联模式下运行。谢谢
您应该选择一种方法，而不是同时使用两种方法。所以要么设置这些条目，要么使用内联模式。
当我将“模块：{加载器：[”更新为“模块：{加载器：[”
这能回答你的问题吗？ Keep getting [WDS] Disconnected! error

标签： javascript reactjs webpack webpack-dev-server

【解决方案1】：

将 transportMode 改为 ws 而不是“sock-js.node”：-

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

【讨论】：

彻底解决了firefox的问题。我想知道为什么它不是默认值。

【解决方案2】：

这将通过启用错误覆盖来解决，

overlay:true 在devServer 对象中再包含一个属性

devServer: {
    ...
    overlay: true,
}

点击这里了解更多信息webpack-dev-server

【讨论】：