Webpack hmr:未找到__webpack_hmr 404

Question

我正在使用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中做些什么来消除这个错误吗？

Answer 1

entry数组中的这一行与webpack-dev-server不兼容

webpack-hot-middleware/client

因为这是除webpack-dev-server之外的任何服务器(例如express或其他类似服务器)对webpack-hot-middleware的要求。

我通过遵循Webpack的教程遇到了这个混合服务器的问题。他们应该更新它，以便使用webpack-dev-server的配置文件的入口点不需要由Webpack生成的工件，该工件试图将开发人员的模块更新热发布到依赖它的定制服务器中。

您可以从条目数组中删除该行，这在使用dev-server的情况下应该可以解决问题。

仅供参考，代码中的那一行来自这里：https://github.com/webpack-contrib/webpack-hot-middleware，它说：

将webpack-hot-middleware/client?...添加到webpack配置的条目数组中。这将连接到服务器，以便在包重新构建时接收通知，然后相应地更新客户端包。

基于您的问题，“我使用的是webpack-dev-server"，因此您没有使用”webpack-热中间件“，应该删除条目行。

Answer 2

我将在这里添加我的答案，因为在我的情况下，这是这个问题的原因。

假设您使用的是Next.JS。

收到这个问题后，我所要做的就是关闭nodeJS的调试窗口(chrome调试工具，但对于BE，不是UI)，然后使用npm start重新启动项目

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