Question

我在一个有点奇怪的设置中使用BrowserSync，我代理我的Web服务器（Docker容器中的Apache），但也从Webpack dev服务器提供热模块替换（HMR）。 / p>

在我的本地开发环境中，设置看起来像这样：

https://mytestsite.localhost - Docker容器中的Apache服务

https://localhost:8888 - 服务HMR的Webpack Dev服务器

https://localhost:3000 - BrowserSync`

对于硬重载，这一切都运行正常 - webpack dev服务器似乎传递了一个消息，即需要重新加载并且一切都很好。

我遇到的问题是热重载。 BS代理服务的文档应该是读取webpack-dev-server服务的hotupdate.json。收到热门更新后，该页面会尝试加载/hotupdate.json（我相信它会告诉它要拾取哪些代码段），但是，因为它是相对URL，浏览器会尝试{{1}这是404s，因为这个GET https://localhost:3000/hotupdate.json实际上是由Webpack服务器提供的，例如hotupdate.json。

因为我知道此资源的绝对网址，所以我想强制BrowserSync将任何请求重定向到https://localhost:8888/hotupdate.json到/hotupdate.json。我以为我可以用一些中间件做到这一点，但我很挣扎，可能是因为我从来没有完全搞过Express式中间件。

我已经尝试过这样的事情，但没有成功！

https://localhost:8888/hotupdate.json

它确实可以加载中间件，比如browserSync({ proxy: { target: `https://${process.env.APP_HOST_PATH}`, middleware: [ dontProxyHotUpdate, require('webpack-dev-middleware')(bundler, { noInfo: true, publicPath: webpackConfig.output.path }), ] }, files: [ 'app/css/*.css', 'app/*.html' ] }); function dontProxyHotUpdate (req, res, next){ if(req.url === '/hotupdate.json'){ req.url = 'https://127.0.0.1:8888/hotupdate.json'; } next(); }，但是我无法重写请求URL。我想可能的解决方案是重写请求URL，或者直接覆盖响应。

N.B。有人可能会问我为什么不直接使用webpack-dev-server，因为它可以很好地为HMR服务。它确实如此，但它也不能很好地重写页面中的锚元素，例如将console.log(req.url)更改为https://mytestsite.localhost/link。这显然对于在开发过程中浏览网站很重要（这很好，但不是必不可少的），但更重要的是重写资产链接 - 特别是SVG，除非路径，主机和端口，否则不会加载全部匹配。

Answer 1

好吧，最后我整理了自己的问题！

我最终使用http-proxy-middlware编写自己的中间件 - 就像这样。

var proxy = require('http-proxy-middleware');

browserSync({
    proxy: {
        target: `https://${process.env.APP_HOST_PATH}`,
        middleware: [
            dontProxyHotUpdate,
            require('webpack-dev-middleware')(bundler, {
                noInfo: true,
                publicPath: webpackConfig.output.path
            }),
            // require("webpack-hot-middleware")(bundler) // I don't think that we want this here as it can be handled by the webpack dev server
        ],
    },

    // no need to watch '*.js' here, webpack will take care of it for us,
    // including full page reloads if HMR won't work
    files: [
      path.join(source, '**/*.php'),
      path.join(source, 'style.css')
    ]
});

var dontProxyHotUpdate = proxy('/hotupdate*', {
    target: 'https://127.0.0.1:8888/',
    changeOrigin: true, // for vhosted sites, changes host header to match to target's host
    logLevel: 'debug',
    secure: false
});

手动将请求重写为Browsersync中的特定URL

1 个答案: