Webpack hmr: __webpack_hmr 404 not found

Posted 2023-03-06

【中文标题】Webpack hmr: __webpack_hmr 404 not found

【英文标题】：

【发布时间】：2017-05-11 13:29:02

【问题描述】：

我正在使用 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 中进行更改以使错误消失吗？

【参考方案1】：

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

【讨论】：

老实说，我什至不知道为什么我的配置文件中有类似的行，但它也对我有用。一定是我在设置过程中查看其他项目时看到的。删除了行，丢失了错误，没有性能问题。拍得好，汉森。

我认为这与热重载有关，应该只在开发环境中使用。

我的条目中没有这样的东西，但仍然出现此错误:(

@EdmundReed 你还有这个问题吗？我和你有同样的问题。

@AdrianMoisa 我的问题是我错误地认为运行webpack-dev-server 将捆绑包写入磁盘，因为它不是我的webpack-dev-server 使用与上述条目捆绑在一起的旧文件应该是已删除。

【参考方案2】：

入口数组中的这一行与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 它说：

将webpack-hot-middleware/client?... 添加到 [webpack config's] 入口数组。这将连接到服务器以接收 捆绑包重建然后更新您的客户端时的通知 相应地捆绑。

根据您的问题，“我正在使用 webpack-dev-server”，因此您没有使用“webpack-hot-middleware”，应该删除输入行。

【参考方案3】：

我将在此处添加我的答案，因为在我的情况下这是导致此问题的原因。

假设您正在使用 Next.JS。

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

我希望它会帮助任何面对它的人（这里的其他答案不适合我）