webpack-dev-middleware 无法在路由路径上热重载

Question

我将webpack-dev中间件放在我的快速路线上，该路线指向/login，如下所示：

(async () => {
const [
{default: webpack},
{default: webpackMW},
{default: webpackHMR},
{default: webpack_login_cfg}
] = await Promise.all([
import('webpack'),
import('webpack-dev-middleware'),
import('webpack-hot-middleware'),
import('../cfg/wp_hmr_login.js')
]),
compiler = webpack(webpack_login_cfg)
router.use(webpackMW(compiler, { publicPath: '/'}))
router.use(webpackHMR(compiler))
})()

webpack中间件可以工作，但热重载不行。在wp_hmr_login.js中，我使用了html webpack插件，并在中间件的配置中设置了等于publicPath: '/'的publicPath: '/login/'(我已经尝试将这两个设置为其他所有内容，包括output.publicPath、''、'/'、删除它等，但它们都给了我"无法获取/xxx"，因为捆绑包的位置与html插件所期望的不同(。在日志中，您可以看到为什么热重新加载不起作用：GET /login/login.b0139afc0a4838fcda0e.hot-update.json 404。看起来webpack在错误的位置放置或查找hotupdate.json。我试着在/main.b0139afc0a4838fcda0e.hot-update.json上查找文件，但它似乎根本不在那里。一个重要的注意事项是，在指向/的索引路由上，相同的代码结构可以完美地工作。任何关于如何绕过这一点的想法都会非常有趣。

编辑：我发现，通过在['webpack-hot-middleware/client...的末尾添加?path=/login，可以删除hotupdate.json上的404，事实上，我现在可以在控制台中看到：

asset login.893cfc7bf76f6dbbc8a2.hot-update.js 3.19 KiB [emitted] [immutable] [hmr] (name: login)
asset index.html 426 bytes [emitted]
asset login.893cfc7bf76f6dbbc8a2.hot-update.json 29 bytes [emitted] [immutable] [hmr]

但在不同于'/'的路线上，热重新装载仍然不起作用

Answer 1

我发现了如何解决这个问题，并在这里为任何有相同问题的人报告：

在[webpack-hot-middleware/client...的末尾添加?dynamicPublicPath=true作为其唯一参数，并将输出publicPath设置为路由的路径，在这种特定情况下为/login/。