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

【问题标题】：webpack-dev-middleware can't Hot Reload on route's pathwebpack-dev-middleware 无法在路由路径上热重载
【发布时间】：2022-01-16 14:25:39
【问题描述】：

我将 webpack-dev-middleware 放在指向 /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-plugin 并在中间件的配置中设置publicPath: '/login/' 等于publicPath: '/'（我已经尝试将这两个设置为其他所有内容，包括output.publicPath、''、@987654328 @，删除它等等，但它们都给了我“无法获取 /xxx”，因为捆绑包的位置与 html 插件所期望的位置不同）。在日志中，您可以看到为什么热重载不起作用：GET /login/login.b0139afc0a4838fcda0e.hot-update.json 404。看起来 webpack 将 hot-update.json 放在或寻找错误的位置。我尝试在/main.b0139afc0a4838fcda0e.hot-update.json 查找文件，但它似乎根本不存在。一个重要的注意事项是相同的代码结构在我的索引路由上完美运行，它指向/。关于如何解决这个问题的任何想法都会非常有趣。

编辑：我发现通过在['webpack-hot-middleware/client... 末尾添加?path=/login 删除了hot-update.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]

但是热重载仍然不能在不同于'/'的路由上工作

【问题讨论】：

标签： express webpack webpack-dev-middleware webpack-hot-middleware

【解决方案1】：

我找到了解决此问题的方法，并在此处向遇到相同问题的任何人报告：

在[webpack-hot-middleware/client... 末尾添加?dynamicPublicPath=true 作为其唯一参数，并将输出publicPath 设置为路由的路径，在本例中为/login/。

【讨论】：