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
再次启动项目
我希望它能帮助任何面对它的人(这里的其他答案不适合我)
我正在使用 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
我希望它能帮助任何面对它的人(这里的其他答案不适合我)