Path rewrite for webpack dev server proxy

config-overrides.js

// https://webpack.js.org/configuration/dev-server/#devserverproxy
// https://github.com/chimurai/http-proxy-middleware
// https://github.com/chimurai/http-proxy-middleware#context-matching
// https://www.npmjs.com/package/micromatch

/* config-overrides.js */

module.exports = {
    // The Webpack config to use when compiling your react app for development or production.
    //    webpack: function(config, env) {
    //        //do stuff with the webpack config...
    //        config = rewireSass(config, env);
    //        config = removeSWPrecachePlugin(config);
    //  
    //        return config;
    //    },
    // The function to use to create a webpack dev server configuration when running the development
    // server with 'npm run start' or 'yarn start'.
    // Example: set the dev server to use a specific certificate in https.
    devServer: function (configFunction) {
        // Return the replacement function for create-react-app to use to generate the Webpack
        // Development Server config. "configFunction" is the function that would normally have
        // been used to generate the Webpack Development server config - you can use it to create
        // a starting configuration to then modify instead of having to create a config from scratch.
        return function (proxy, allowedHost) {
            // Create the default config by calling configFunction with the proxy/allowedHost parameters
            const config = configFunction(proxy, allowedHost);

            config.before = function (app, server, compiler) {
                app.use('/', function (req, res, next) {
                    console.log(`from ${req.ip} - ${req.method} - ${req.originalUrl}`);
                    next();
                });
            }

            config.proxy = {
                ...config.proxy,
                '/api/**': {
                    // route this path to the backend API
                    target: 'http://host.docker.internal:8000'
                },
                '/path/styles.+([0-9]).css': {
                    target: 'http://localhost:8002', // webpack dev server
                    pathRewrite: { '^/path/styles.([0-9]+).css' : '/styles.$1.css' }
                },
            }

            // Return your customised Webpack Development Server config.
            return config;
        }
    }
}