0

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

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

但热重载仍然无法在不同的路线上工作'/'

4

1 回答 1

0

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

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

于 2021-12-13T12:42:08.457 回答