__webpack_hmr 转到错误的端口并失败
__webpack_hmr goes to the wrong port and fails
我正在尝试让热重载与我的设置一起工作。目前,它是这样工作的--
server.js
// this is the main server, which connects to db, serves react components, etc
const app = express();
app.get('/:params?*', (req, res) => {
res.status(200).send(`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
hi
<script src="http://localhost:3000/build/client.js"></script>
</body>
</html>
`);
});
...
app.listen(5000);
gulpfile.babel.js
const CLIENT_DEV_CONFIG = {
entry: [
CLIENT_ENTRY,
'webpack-hot-middleware/client',
'eventsource-polyfill',
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
output: {
...CLIENT_OUTPUT,
publicPath: 'http://localhost:3000/build/',
},
module: {
loaders: [BABEL_LOADER]
},
}
gulp.task('client-watch', done => {
console.log(CLIENT_DEV_CONFIG.output.publicPath);
const opts = {
hot: true,
publicPath: CLIENT_DEV_CONFIG.output.publicPath,
headers: {'Access-Control-Allow-Origin': '*'},
};
const app = new express();
const compiler = webpack(CLIENT_DEV_CONFIG);
app.use(webpackDevMiddleware(compiler, opts));
app.use(webpackHotMiddleWare(compiler));
app.listen(3000, (err) => {
console.log(err || '[webpack-hot-devserver] running on 3000');
done();
});
});
现在,
- 如果我访问
localhost:5000
。有效
- 如果我访问
localhost:3000/build/client.js
,它也有效
但是,如果我更新了一些我没有得到实时更新的东西,我需要刷新...:(
查看网络选项卡,我看到对 http://localhost:5000/__webpack_hmr
的请求失败,我认为这可能是原因。
http://localhost:5000/__webpack_hmr
实际上应该是 http://localhost:3000/__webpack_hmr
但是,我不确定如何更正此问题
您可以在 entry
数组的行中的 webpack 配置中指定 URL,如下所示:
const CLIENT_DEV_CONFIG = {
entry: [
CLIENT_ENTRY,
`webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,
'eventsource-polyfill',
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
output: {
...CLIENT_OUTPUT,
publicPath: `${HOT_SERVER_URL}/build/`,
},
module: {
loaders: [
{
...BABEL_LOADER,
query: {...BABEL_QUERY, presets: [...BABEL_QUERY.presets, 'react-hmre']},
},
],
},
}
特别是这一行:
`webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,
path
选项允许设置热模块重新加载应该命中的位置以访问 __webpack_hmr
端点。例如,可以将其设置为:
'webpack-hot-middleware/client?path=//localhost:3000/__webpack_hmr'
我正在尝试让热重载与我的设置一起工作。目前,它是这样工作的--
server.js
// this is the main server, which connects to db, serves react components, etc
const app = express();
app.get('/:params?*', (req, res) => {
res.status(200).send(`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
hi
<script src="http://localhost:3000/build/client.js"></script>
</body>
</html>
`);
});
...
app.listen(5000);
gulpfile.babel.js
const CLIENT_DEV_CONFIG = {
entry: [
CLIENT_ENTRY,
'webpack-hot-middleware/client',
'eventsource-polyfill',
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
output: {
...CLIENT_OUTPUT,
publicPath: 'http://localhost:3000/build/',
},
module: {
loaders: [BABEL_LOADER]
},
}
gulp.task('client-watch', done => {
console.log(CLIENT_DEV_CONFIG.output.publicPath);
const opts = {
hot: true,
publicPath: CLIENT_DEV_CONFIG.output.publicPath,
headers: {'Access-Control-Allow-Origin': '*'},
};
const app = new express();
const compiler = webpack(CLIENT_DEV_CONFIG);
app.use(webpackDevMiddleware(compiler, opts));
app.use(webpackHotMiddleWare(compiler));
app.listen(3000, (err) => {
console.log(err || '[webpack-hot-devserver] running on 3000');
done();
});
});
现在,
- 如果我访问
localhost:5000
。有效 - 如果我访问
localhost:3000/build/client.js
,它也有效
但是,如果我更新了一些我没有得到实时更新的东西,我需要刷新...:(
查看网络选项卡,我看到对 http://localhost:5000/__webpack_hmr
的请求失败,我认为这可能是原因。
http://localhost:5000/__webpack_hmr
实际上应该是 http://localhost:3000/__webpack_hmr
但是,我不确定如何更正此问题
您可以在 entry
数组的行中的 webpack 配置中指定 URL,如下所示:
const CLIENT_DEV_CONFIG = {
entry: [
CLIENT_ENTRY,
`webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,
'eventsource-polyfill',
],
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
output: {
...CLIENT_OUTPUT,
publicPath: `${HOT_SERVER_URL}/build/`,
},
module: {
loaders: [
{
...BABEL_LOADER,
query: {...BABEL_QUERY, presets: [...BABEL_QUERY.presets, 'react-hmre']},
},
],
},
}
特别是这一行:
`webpack-hot-middleware/client?path=${HOT_SERVER_URL}/__webpack_hmr`,
path
选项允许设置热模块重新加载应该命中的位置以访问 __webpack_hmr
端点。例如,可以将其设置为:
'webpack-hot-middleware/client?path=//localhost:3000/__webpack_hmr'