mock-server-webpack-plugin

• :wrench: 同时支持webpack 4 与 webpack 5
• :key: 同时支持 ESM 规范与 CommonJS 规范 ​
• :black_nib: 内置mockjs, 多种数据结构随意组合
• :fire: 支持热更新 ​，修改 Mock 数据无需重新启动服务
• :bulb: Typescript 编写，更好的类型提示
• :hatching_chick: 开发友好，无跨域问题，无需依赖其他服务
• :hammer: (实验性功能)解析 OpenApi 3 规范数据文件,快速生成可用 Mock 服务

[!WARNING] 由于 Mock 与实际后端模拟数据存在较大差异, 原因在于逻辑的复杂度不同, 以及使用目的不同, 因此建议您在使用 openApi 3 解析产生的 mock 服务时, 应更加注重逻辑依赖较弱且数据量较多的接口, 如果必须, 请使用 mockPath 模式进行自定义逻辑与数据

开始

安装

1npm install mock-server-webpack-plugin -D
2or
3pnpm add mock-server-webpack-plugin -D

引入

ESM

1import path from 'path'
2import { Configuration } from 'webpack'
3import MockServerWebpackPlugin from 'mock-server-webpack-plugin'
4
5const config: Configuration = {
6  mode: 'development',
7  // ...
8  plugins: [
9    new MockServerWebpackPlugin({
10      port: 3636,
11      mockPath: path.resolve('./mock.js'),
12      // or
13      // openApi: 'http://127.0.0.1:4000/file/default_OpenAPI.json',
14    }),
15  ],
16}
17
18export default config

CommonJS

1const path = require('path')
2const { Configuration } = require('webpack')
3const MockServerWebpackPlugin = require('mock-server-webpack-plugin')
4
5/**
6 * @type {Configuration}

7 */
8const config = {
9  mode: 'development',
10  // ...
11  plugins: [
12    new MockServerWebpackPlugin({
13      port: 3000,
14      mockPath: path.resolve('./mock.js'),
15      // or
16      // openApi: 'http://127.0.0.1:4000/file/default_OpenAPI.json',
17    }),
18  ],
19}
20
21module.exports = config

接口编写 (mockPath 模式)

1const Mockjs = require('mockjs')
2
3const mockUserList = Mockjs.mock({
4  'data|50': [
5    {
6      'id|+1': 1,
7      name: '@cname',
8      age: '@integer(10, 60)',
9    },
10  ],
11})
12
13module.exports = [
14  {
15    url: '/user-list',
16    method: 'get',
17    response: () => {
18      return {
19        code: 200,
20        data: mockUserList.data,
21      }
22    },
23  },
24  {
25    url: '/add-user',
26    method: 'post',
27    response: (req) => {
28      const { name, age } = req.body
29      mockUserList.data.push({
30        id: mockUserList.data.length + 1,
31        name,
32        age,
33      })
34      return {
35        code: 200,
36        message: '添加成功',
37      }
38    },
39  },
40  {
41    url: '/delete-user',
42    method: 'delete',
43    response: (req) => {
44      const { id } = req.query
45      const index = mockUserList.data.findIndex((item) => item.id === Number(id))
46      mockUserList.data.splice(index, 1)
47      return {
48        code: 200,
49        message: '删除成功',
50      }
51    },
52  },
53]

接口自动生成(openApi 模式)

1module.exports = {
2  // ...
3  plugins: [
4    new MockServerWebpackPlugin({
5      openApi: 'http://127.0.0.1:4000/file/default_OpenAPI.json', // openApi 模式(本地/在线文件)
6    }),
7    // ...
8  ],
9}

所有配置

1module.exports = {
2    // ...
3    plugins: [
4        new MockServerWebpackPlugin({
5          port: 3636, // 端口号
6          host: '127.0.0.1', // 主机
7          prefix: '/dev-api', // api 前缀
8          mockPath: path.resolve('./mock.js'), // mockPath 模式
9          openApi: 'http://127.0.0.1:4000/file/default_OpenAPI.json',, // openApi 模式(本地/在线文件)
10        }),
11        // ...
12    ]
13}