Set up Webpack Browsersync proxy when sitting behind a http proxy

Question

I want to set up a browsersync proxy in order to inject CSS and Javascript to an arbitrary website.

However, I started to create a simple proxy with browsersync trying to serve me my _custom.css file.

var browserSync = require('browser-sync').create();

browserSync.init({
    proxy: {
        target: "www.google.com"
    },
    port: 9000,
    serveStatic: ["app/static"],
    logLevel: "debug",
    files: "app/static/_custom.css",
    snippetOptions: {
        rule: {
            match: /<\/head>/i,
            fn: function (snippet, match) {
                return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
            }
        }
    }
});

This works great, when I have direct connection to the web. Now my problem is, there are occasions, where I got a http proxy sitting behind the web.

Through some research I found out, that I should use the browsersync option "middleware". I ended up by extending my configuration:

var browserSync = require('browser-sync').create();
var proxyMiddleware = require('http-proxy-middleware');
var proxyURL = 'http://192.168.0.55:8080';
var proxy = proxyMiddleware('/', {target: proxyURL, logLevel: 'debug'});

browserSync.init({
    proxy: {
        target: "www.google.com",
        middleware: [proxy]
    },
    port: 9000,
    serveStatic: ["app/static"],
    logLevel: "debug",
    files: "app/static/_custom.css",
    snippetOptions: {
        rule: {
            match: /<\/head>/i,
            fn: function (snippet, match) {
                return '<link rel="stylesheet" type="text/css" href="/_custom.css"/>' + snippet + match;
            }
        }
    }
});

However, it did not work and I have no clue where the problem lies. Sometimes I get a blank page with infinite loop. Sometimes the browser stops at the proxy error page.

Can someone help me?