我们来看一些 webpack-dev-server 是如何实现的，同时这种方式也是解决跨域的一种方法。
跨域的本质是因为域名、端口、协议的不同导致不能互相访问，如果我们把 webpack 和 后端服务做成一个服务那就不会存在这样的问题了，如下：

安装依赖

我们需要用到 webpack-dev-middleware 这个包

  1. yarn add webpack-dev-middleware --dev

编写服务

这边实现的几个步骤

  1. 获取 webpack 的配置信息 config。
  2. 引入 webpack 函数。
  3. 通过webpack函数，解析config 获取到 编译后的结果 complier。
  4. 将 complier 作为中间件的参数，放到 app 中。

这样就把 webpack 启动放到了服务中，如下：

/**
  现在在手写 webpack-dev-server
**/
let express = require('express');
//得到 app 应用对象
let app = express();

// 实现 
app.get('/api/users', (req, res) => {
  res.json([{id: 1, name: '张三'},{id: 2, name:'李四'}]);
})
let webpack = require('webpack');
let middleware = require('webpack-dev-middleware');
let config = require('./webpack.config');//获取 webpack 的配置信息
// complier 就是编译后的结果
let complier = webpack(config);
// webpackDevMiddleware 会返回一个中间件
// 中间件负责根据配置文件打包当前的项目并且返回打包后的结果
// 中间件有两件工作
// 1.负责打包
// 2.返回打包后的静态文件 index.html main.js

app.use(middleware(complier));
app.get('/api/user', (req, res)=>{
    res.json({name:'jingyu2'})
});

app.listen(4000);

结果

这边就不再访问 3000 端口了，直接访问服务中的 4000 端口，结果是一样的，如下：
image.png