如上图所示我们需要：  

解决问题：开发阶段接口跨越问题

目标：将GitHub API代理到 本地开发服务器上

devServer 构建本地服务器：让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，它是一个单独的组件，在 webpack 中进行配置之前需要单独安装它作为项目依赖。

npm install --save-dev webpack-dev-server

前言：webpack Dev Server支持配置代理-API

1: 配置 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
    // devServer属性专门为 webpack-dev-server指定配置选项
    devServer: {
        // contentBase属性：额外的静态资源路径,可以是字符串/数组【可配置一个或多个路径】
        contentBase: './public',
        // proxy属性：用来添加代理服务配置的，[每一个属性，就是一个代理规则的配置]
       proxy: {
         '/api': {
              // http://localhost:8080/api/users -> https://api.github.com/api/users
              target: 'https://api.github.com', // 代理地址，这里设置的地址会代替axios中设置的baseURL
              // http://localhost:8080/api/users -> https://api.github.com/users
              pathRewrite: {
                 '^/api': '' // 把以/api开头的替换为空   
              },
              changeOrigin: true // 以实际代理请求发生过程中的主机名去请求        
          }   
       }
    },
    plugins: [
     // // 开发阶段最好不要使用这个插件，如果静态资源文件比较大，则打包开销大，速度慢
     // new CopyWebpackPLugin(['public'])
   ]
}

  main.js

const ul = document.createElement('ul')
document.body.append(ul)
//  5: Dev Server-代理API 跨域请求，索然GitHub 支持 CORS,但是不是每个服务端都应该支持
//     fetch('https://api.github.com/users')
fetch('/api/users') // http://localhost:8080/api/users
   .then(res => res.json())
   .then(data => {
       data.forEach(item => {
           const li = document.createElement('li')
           li.textContent = item.login
           ul.append(li)
       })
   })

2: 执行 webpack-dev-server--open

3:  结果：

     会在浏览器请求里看到代理API   http://localhost:8080/api/users请求成功了并有了接口返回值

     实际访问的是：https://api.github.com/users

拓展知识点！： 

为什么不能使用 localhost:8080 作为 GitHub 的 主机名？
       因为，默认代理服务器会以我们实际在浏览器请求的主机名【即 localhost:8080】作为代理请求的主机名
        简言之就是我们在浏览器端对代理过后的地址发起请求，那这个请求背后它还是要请求到gitHub 的服务器，请求过程中会带一个主机名，这个主机名默认是我们用户在浏览器端发起请求的主机名【localhost:8080】。

        一般情况下【发送一个请求，服务器那边会有多个网站】，服务器那端是要根据主机名来判断这个请求属于那个网站，从而把这个请求指派到对应的网站，而 localhost:8080对于 gitHub 服务肯定是不认识的。
         changeOrigin：true  就是以实际代理请求发生过程中的主机名去请求，我们请求github地址实际是请求的 api.github.com 这个地址，所以它主机名就会保持原有的状态，我们就不用关心最终被代理成什么，正常请求就可以了