Webpack hmr:__webpack_hmr 404 未找到

Webpack hmr: __webpack_hmr 404 not found

我正在使用 webpack-dev-server 进行热模块替换。它工作得很好,但这个错误每隔几秒就会出现在控制台中:GET http://mysite:8080/__webpack_hmr 404 (Not Found).

这是我的 webpack.config.js:

var webpack = require('webpack'),
    hostname = 'mysite',
    port = 8080;

module.exports = {
    entry: [
        'babel-polyfill',
        './src/js/main.js',
        './dev/requireCss.js',
        'webpack/hot/dev-server',
        // I'm assuming the fault lies in the following line, but I can't figure out what's wrong
        'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'
    ],
    output: {
        path: __dirname + '/webpack',
        filename: "bundle.js",
        publicPath: 'http://'+hostname+':'+port+'/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loaders: ['react-hot', 'babel-loader?presets[]=react&presets[]=es2015']
        } // removed some loaders for brevity
        ]
    },
    resolve: {
        extensions: ['', '.json', '.js', '.jsx']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: "source-map",
    devServer: {
        contentBase: __dirname + '/dev',
        hot: true,
        proxy: [{
            path: /\/(?!__webpack_hmr).+/, // I get the same error if I change this to 'path: /\/.+/'
            target: 'http://my-backend.localhost'
        }]
    }


};

这个想法是开发服务器应该将除 /__webpack_hmr 之外的所有请求转发到我的后端 (my-backend.localhost)。这适用于除 __webpack_hmr 以外的所有内容。

我可以在我的 conf 中更改什么来使错误消失吗?

已通过删除 条目 下的以下行进行修复: 'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'我不知道它为什么起作用。请参阅 Amin Ariana 的回答,了解为什么这对您有用。

条目数组中的这一行与 webpack-dev-server 不兼容:

webpack-hot-middleware/client

因为 webpack-hot-middleware 要求与 webpack-dev-server 以外的任何服务器(例如 express 或类似服务器)一起工作。

我 运行 按照 Webpack 教程解决了这个混合服务器问题。他们应该更新它,以便使用 webpack-dev-server 的 Webpack 配置文件的入口点不需要 webpack-hot-middleware 生成的工件,它试图将开发人员的模块更新热发射到定制构建的服务器取决于它。

您可以从条目数组中删除该行,如果使用 dev-server 应该可以解决问题。

仅供参考,您代码中的那一行来自此处: https://github.com/webpack-contrib/webpack-hot-middleware 它说:

Add webpack-hot-middleware/client?... into the [webpack config's] entry array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly.

根据您的问题,"I'm using webpack-dev-server",您没有使用 "webpack-hot-middleware",应该删除输入行。

我会在这里添加我的答案,因为在我的情况下,这是导致此问题的原因。

假设您正在使用 Next.JS.

收到这个issue后,我只需要关闭nodeJS的debugwindow即可(chrome调试工具,BE,不是UI)然后使用 npm start

再次启动项目

我希望它能帮助任何面对它的人(这里的其他答案不适合我)