How to use the webpack-plugin-serve.WebpackPluginServe function in webpack-plugin-serve

VERSION: JSON.stringify(pkgJson.version),
          WS_URL: JSON.stringify(process.env.WS_URL)
        }
      }),
      new HtmlWebpackPlugin({
        inject: true,
        template: path.join(context, `${hasPublic ? 'public/' : ''}${name}.html`),
        PAGE_TITLE: 'Polkadot/Substrate Portal'
      }),
      new webpack.optimize.SplitChunksPlugin(),
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash:8].css'
      }),
      isProd
        ? null
        : new WebpackPluginServe({
          hmr: false, // switch off, Chrome WASM memory leak
          liveReload: false, // explict off, overrides hmr
          progress: false, // since we have hmr off, disable
          port: 3000,
          static: path.join(process.cwd(), '/build')
        })
    ]).filter((plugin) => plugin),
    watch: !isProd
  };
}

output: {
    path: output,
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Sonar'
      // template: './index.html'
    })
  ]
}

if (argv.serve) {
  config.plugins.push(
    new WebpackPluginServe({
      host: 'localhost',
      static: output,
      open: false,
      liveReload: true,
      historyFallback: true,
      // progress: 'minimal',
      progress: false,
      ramdisk: ramdisk
    })
  )
  config.entry.push(
    'webpack-plugin-serve/client'
  )
}

module.exports = config

const usage = (config: Configuration) => {
  (config.entry as string[]).push('webpack-plugin-serve/client');

  config.watch = true;

  config.plugins!.push(
    new WebpackPluginServe({
      compress: true,
      historyFallback: true,
      host: '0.0.0.0',
      port: 3808,
      liveReload: true,
      middleware: (app: any, builtins: any) =>
        app.use(async (ctx: any, next: any) => {
          await next();
          ctx.set('Access-Control-Allow-Headers', '*');
          ctx.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
          ctx.set('Access-Control-Allow-Origin', '*');
        }),
      static: '/',

      status: true,
      progress: true,

progress: true,
    }),
  );

  config.output!.publicPath = '/';

  return config;
};

const baseConfig = {
    entry: 'index.js'
};

const configWithServer = usage(baseConfig);

const newConfigWithGlobby = new WebpackPluginServe({
  static: {
    glob: ['dist/**/public'],
    options: { onlyDirectories: true }
  }
});

const entry = isDev ? ['./src/index.tsx', 'webpack-plugin-serve/client'] : './src/index.tsx';

const plugins = [
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
  }),
];

if (isDev) {
  plugins.push(
    new Serve({
      hmr: true,
      historyFallback: {
        verbose: true,
        disableDotRule: true,
      },
      static: [outputPath],
    }),
  );
} else {
  plugins.push(new MiniCssExtractPlugin());
}

module.exports = {
  entry,
  mode: process.env.NODE_ENV,
  devtool: 'cheap-eval-source-map',

const isDev = process.env.NODE_ENV === 'development';
const outputPath = resolve(__dirname, 'dist');

const entry = isDev ? ['./src/index.tsx', 'webpack-plugin-serve/client'] : './src/index.tsx';

const plugins = [
  new HtmlWebpackPlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  })
];

if (isDev) {
  plugins.push(new Serve({
    hmr: true,
    historyFallback: true,
    static: [outputPath]
  }));
} else {
  plugins.push(new MiniCssExtractPlugin({
    filename: isDev ? '[name].css' : '[name].[contenthash].css',
    chunkFilename: isDev ? '[id].css' : '[id].[contenthash].css'
   }))
}

module.exports = {
  entry,
  mode: process.env.NODE_ENV,
  devtool: 'cheap-eval-source-map',
  module: {

const path = require('path');

const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
const importFresh = require('import-fresh');
const nodeExternals = require('webpack-node-externals');

const SRC_DIR_CLIENT = path.resolve(__dirname, 'client');
const SRC_DIR_SERVER = path.resolve(__dirname, 'server');
const DIST_DIR = path.resolve(__dirname, 'dist');

const serve = new Serve({
  port: 3000,
  static: [DIST_DIR],
  waitForBuild: true,
  middleware(app) {
    app.use(async (ctx, next) => {
      const renderer = importFresh(path.resolve(DIST_DIR, 'server.js'));
      await renderer(ctx, next);
    });
  }
});

function createConfig(opts) {
  const { name } = opts;
  const isServer = name === 'server';
  const optimize = process.env.NODE_ENV === 'production';

plugins: plugins.concat([
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(ENV),
          VERSION: JSON.stringify(pkgJson.version),
          DEBUG: JSON.stringify(DEBUG)
        }
      }),
      new HtmlWebpackPlugin({
        inject: true,
        template: path.join(context, `${hasPublic ? 'public/' : ''}${name}.html`),
        PAGE_TITLE: 'PRE Light Client'
      }),
      new webpack.optimize.SplitChunksPlugin(),
      new WebpackPluginServe({
        liveReload: true,
        port: 3000,
        static: path.join(process.cwd(), '/build')
      })
    ]),
    watch: !isProd
  };
}

const config = require("./webpack.config")[0];
const {
  WebpackPluginServe: Serve
} = require('webpack-plugin-serve');

const options = {
  client: {
    address: 'localhost:3000',
  },
  static: [process.cwd(), require('path').resolve('./bin')],
  port: 3000,
};

config.plugins = [
  new Serve(options)
];
config.watch = true;

module.exports = config;