详解如何优雅在webpack项目实现mock服务器

如何在Webpack项目中实现Mock服务器可以分为以下几个步骤：

第一步：安装相关依赖

在项目中需要安装以下依赖：webpack-dev-server、express和cross-env（如果是在Windows系统，需要用cross-env来设置环境变量）。使用npm可以通过以下命令安装：

npm install webpack-dev-server express cross-env --save-dev

第二步：创建Mock数据文件夹

我们需要在项目根目录下创建一个Mock文件夹，该文件夹用于存放模拟数据，其中可以创建多个JS文件，每个JS文件包含一组Mock数据。

第三步：创建mock服务

在项目根目录下，新建server.js文件，内容如下：

const express = require('express');
const app = express();

const apiRouter = require('./Mock/api.js')

app.use('/api', apiRouter);

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server is listening on port ${port}`));

当有HTTP请求发送到/api的时候，会经过apiRouter这个中间件，根据请求的url返回相应的Mock数据。

第四步：编写Mock数据

在上面的server.js中，我们使用了require('./Mock/api.js')，可以在项目根目录下创建Mock文件夹，并在Mock文件夹下创建api.js文件。api.js文件可以导出一个JavaScript对象，该对象包含多个Mock数据。例如：

module.exports = {
  '/api/users': [{ id: 1, name: 'John' }, { id: 2, name: 'Alex' }],
  '/api/posts': [{ id: 1, title: 'Hello, world!', content: '...' }],
};

第五步：配置Webpack

在Webpack配置文件中添加如下配置：

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  mode: 'development',
  devServer: {
    before(app) {
      app.use(express.json());
      app.use(express.urlencoded({ extended: true }));

      app.use('/api/*', (req, res) => {
        const mockPath = path.join(__dirname, `Mock${req.path}.js`);
        delete require.cache[mockPath];
        const mockData = require(mockPath);

        res.json(mockData);
      });
    },
  },
});

Webpack提供了一个devServer，在启动Webpack时会自动启动一个HTTP服务器。我们在devServer的before属性中添加了一个中间件（express的中间件），该中间件处理HTTP请求并返回Mock数据，对应的Mock数据文件路径是Mock${req.path}.js。

第六步：启动Webpack

在package.json中的"scripts"部分添加如下代码：

"start": "cross-env NODE_ENV=development webpack-dev-server --open"

在命令行窗口运行npm start，即可在本地启动一个HTTP服务器，并且可以通过访问http://localhost:8080/api/users来验证Mock数据是否已经成功返回。

示例1：针对简单的GET请求返回Mock数据

如下的Mock数据文件定义了一个API用于获取用户列表，模拟数据是两个用户对象数组：

// userMock.js
module.exports = [
  {
    id: 1,
    name: "Tom",
    age: 20
  },
  {
    id: 2,
    name: "Jerry",
    age: 25
  }
];

可以通过server.js文件实现路由和返回模拟数据：

const express = require('express');
const userMock = require('./userMock');

const app = express();
app.get('/api/users', (req, resp) => {
    console.log('fetching list of users');
    resp.json(userMock);
});

const server = app.listen(3000, () =>
  console.log('Examples app listening on port 3000!'),
);

这里已经使用Express生成了一个HTTP服务器，它会在api/users的请求路由回调函数中返回模拟数据。

示例2：针对Ajax POST（发送媒体类型是application/json）方式请求数据返回Mock数据：

数据

// user.json
{
  "name": "John",
  "age": "20"
}

对应的Mock数据文件解析：

// userAdditionMock.js
module.exports = (req, resp, next) => {
  const { name, age } = req.body;
  console.log(`Adding user : ${name} - ${age}`);

  resp.json({
    success: true,
    message: "User added!"
  });
};

该文件可以接收POST请求，数据格式为JSON格式，然后以JSON格式返回数据。

const express = require('express');
const userAdditionMock = require('./userAdditionMock');

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/api/user', userAdditionMock);

const server = app.listen(3000, () =>
  console.log('Examples app listening on port 3000!'),
);

这里已经使用Express生成了一个HTTP服务器，客户端利用Ajax方式向server.js发送POST请求，发送媒体类型是application/json。在server.js中定义路由API/api/user，对应的请求路由回调函数返回模拟数据。

以上是在Webpack项目中实现Mock服务器的攻略，示例可以帮助理解。