how to setup proxy webpack dev server code example

Example 1: webpack setup proxy manual

proxy: {
  "/api": "http://localhost:3000",
  "/alpha": {
    target: "http://localhost:8080",
    pathRewrite: { "^/alpha": "" }
  },
  "/bravo": {
    target: "http://localhost:8080",
    pathRewrite: { "^/bravo": "" }
  },
  "/charlie": {
    target: "http://localhost:8080",
    pathRewrite: { "^/charlie": "" }
  },
  ...
  "/zulu": {
    target: "http://localhost:8080",
    pathRewrite: { "^/zulu": "" }
  },
}

Example 2: webpack proxy

devServer: {
		open: true,
		compress: true,
		hot: true,
		inline: true,
		watchContentBase: true,
		contentBase: resolve(process.cwd(), 'build'),
		historyApiFallback: true,
		before: (app, server, compiler) => {
			const fileExist = existsSync('./src/setupProxy.js')
			if (fileExist) {
				const pathProxy = resolve(process.cwd(), 'src/setupProxy')
				return require(`${pathProxy}`)(app)
			}
		},
		port: process.env.PORT || 3000,
		liveReload: false
	},

Example 3: webpack setup proxy manual

proxy: [{
  "/api": "http://localhost:3000",
},{
  context: ['/alpha', '/bravo', '/charlie', '/zulu'],
  target: 'http://localhost:8080',
  rewrite: function (path, req) { return path.replace(/\/(.*?)/g, '') }
}]