我们都知道，在浏览器端会有同源策略，不符合同源策略(也就是协议、域名、端口号三者组成的同源策略)的资源是获取不到的。那如何能够获取一些其他网站的资源呢？答案就是跨域，那么这里就讲下devServer中常用的一些东西，然后最后重点讲下proxy的方式。
一、什么devServer
通过来自 webpack-dev-server 的这些选项，能够用多种方式改变其行为。
来看一个例子：
devServer: {// 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。contentBase: path.join(__dirname, "dist"),// 一切服务都启用gzip 压缩：compress: true,// 端口号port: 8080
}当服务器启动时，在解析模块列表之前会有一条消息：
http://localhost:8080/
webpack output is served from /build/
Content not from webpack is served from /path/to/dist/二、devServer.host
指定使用一个 host。默认是 localhost。如果你希望服务器外部可访问，也就是说，我们可以用host的方式在同一个局域网内，其他设备可以通过这个ip地址也可以访问到这个项目，代码指定如下：
host: "0.0.0.0"或
webpack-dev-server --host 0.0.0.0三、devServer.https
默认情况下，dev-server 通过 HTTP 提供服务。通过下面代码你可以开启一个https的请求，也可以选择带有 HTTPS 的 HTTP/2 提供服务：
https: true或
webpack-dev-server --https四、devServer.open
设置这个后，我们打完包会自动打开浏览器访问这个地址页面。
五、devServer.port
请求端口号，这个很简单没什么好讲的。
port: 8080或
webpack-dev-server --port 8080六、devServer.proxy
重点的终于来了，如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。这个在vue中也是非常的常用，比如代理某一个接口，请求某项资源等等，是跨域的的一种常见方式。不过切记，这个方式只用于本地，上线之后就要通过其他的方式去配置了，像nginx就是线上代理的一种最好方式。
在 localhost:8080 上有后端服务的话，你可以这样启用代理：
proxy: {"/api": "http://localhost:8080"
}请求到 /api/users 现在会被代理到请求 http://localhost:8080/api/users，这样子我们就可以获取user这个接口的所有数据了。切记，我们在写业务代码时候都要加上api，这样子才能捕获到api这个接口。
另一种方式，通过重写的方式，如下面，这个也可以代理我们自己静态资源写的mock接口，只要路径和端口写正确就没问题。
proxy: {"/api": {target: "http://localhost:3000",// 这个不经可以代理线上也可以是本地的静态数据的代理请求pathRewrite: {"^/api" : ""}}
}默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，修改配置如下：
proxy: {"/api": {target: "https://other-server.example.com",secure: false}
}如果你想代理多个本地目标接口，可以通过数组的方式，代码如下：
proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",
}]以上代理的方式在vue-cli中也是类同的，我们可以参考。
参考文档：
https://webpack.js.org/configuration/dev-server/#devserver