How to set up proxy dev-server?

Question

JavaScript

Good day.
The essence of the task: you need to configure a proxy for all resources from a remote server,
but at the same time take js, css and pictures from localhost
did this

devServer: {
    host: '0.0.0.0',
    proxy: {
      '/': {
        target: 'http://mysite.by',
        secure: false,
        changeOrigin: true,
        autoRewrite: true,    
      }
    },

Naturally everything is proxied, how to exclude certain folders with resources?

Answer 1

Google did not give an answer, but said that it was possible :)
After googling on the github, I found a solution that did not work very well, but the approach was correct.
In addition, I had CMS Modx Revo with the base tag, which spoiled everything. First of all, you need to remove it, in the CMS settings change the url generation scheme to full
, and finish the webpack.config from the github example

const path = require('path');
const log = require('debug')('webpack.config');
const webpack = require('webpack');
module.exports = (env) => {

  log('env', env);

  return {

    entry: {
      main: [
        './client/main.js',
        './client/main.css'
      ]
    },

    output: {
      publicPath: env.public,
      filename: 'scripts/[name].js',
      path: `${path.resolve('./dist')}/static/theme`
    },

    devServer: {
      hot: true,
      contentBase: './dist',
      port: env.port,
      host: "0.0.0.0",
      proxy: {
        "/": {
          secure: false,
          changeOrigin: true,
          autoRewrite: true,
          headers: {
            'X-ProxiedBy-Webpack': true,
          },
          target: 'http://mysite.by',
          bypass (request, response, options) {
            const asset = request.path;
            console.log(asset);
            // yesno if the requested path is one of the following.
            const byPass = [
                env.public,
                '/webpack-dev-middleware/',
                '/webpack-dev-server/',
                '/sockjs-node/',
                '/socket.io/',
            ].find(pattern => asset.indexOf(pattern) >= 0 ) !== undefined;
            return byPass && request.path;
          }
        },
      }
    },

    module: {
      rules: [
        { test: /\.css$/,
          use: [
            {loader: 'style-loader'},
            {loader: 'css-loader'}
          ]
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ]
  } 
};

And everything worked even HMR :)
So browsersync and gulp still rest in the archive folder :)