webpack 5 mock 10分钟快速配置

不说废话，直接开始。我使用 webpack 5.90.3，以下是我的配置。

1. 文件结构
   text
project_root/
|-- webpack.config.js
|-- mockserver.js
|-- mock/
|-- user.js
2. webpack.config.js

{{< admonition tip >}}
因为 express 现在不再附带 body-parser，现在需要执行 npm i -D body-parser。如果你希望读取 request 里面的内容，你会需要这个插件。
{{< /admonition >}}

“`javascript
const webpack = require(“webpack”);
var bodyParser = require(‘body-parser’)
const mockServer = require(“./mockserver.js”)

module.exports = (env, argv) => {
// … some code
return {
devServer: {
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error(‘webpack-dev-server is not defined’);
}

               devServer.app.use(bodyParser.json())
               devServer.app.use(mockServer());
               // don't forget this line
               return middlewares;
           }
       },
       //... and so on

“`

1. mockserver.js

mockserver.js 返回给 express dev server 需要的一个中间件（其实在java开发看来，这个东西习惯称为切面或过滤器）。

“`javascript
const fs = require(“fs”);
const path = require(“path”);

module.exports = function () {
let mockDataPath = path.resolve(__dirname, “./mock/”);
let existsMockDir = fs.existsSync(mockDataPath);
let getMockData = () => {
if (existsMockDir) {
let modules = fs.readdirSync(mockDataPath);
return modules.reduce((pre, module) => {
return {
…pre,
…require(path.join(mockDataPath, “./” + module)),
};
}, {});
} else {
console.log(“please create a mock directory under your project root!”);
return {};
}
};

 let splitApiPath = (mockData) => {
   let data = {};
   for (let path in mockData) {
     let [method, apiPath, sleep] = path.split(" ");
     let newApiPath = method.toLocaleUpperCase() + apiPath;
     data[newApiPath] = {
       path: newApiPath,
       method,
       sleep,
       callback: mockData[path],
     };
   }
   return data;
 };

 let delayFn = (sleep) => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve();
     }, sleep);
   });
 };

 async function ret(req, res, next) {
   let { path, method } = req;
   console.log("mock server received request: %s %s", method, path);

   if (path.indexOf("api") === -1 || !existsMockDir) {
     return next();
   }
   let mockData = splitApiPath(getMockData());
   let pathKey = method.toLocaleUpperCase() + path;
   let { sleep, callback } = mockData[pathKey];
   let isFuntion = callback.__proto__ === Function.prototype;
   if (sleep && sleep > 0) {
     await delayFn(sleep);
   }
   if (isFuntion) {
     callback(req, res);
   } else {
     res.json({
       ...callback,
     });
   }
   next();
 }

 return async (req, res, next) => {
   // next();
   return ret(req, res, next);
 };

};
“`

1. mock/user.js

user.js 里面定义 mock 的数据以及如何返回。
可以按模块多写几个js, 都会自动加载。

javascript
module.exports = {
"GET /api/v0/user/list": {
success: true,
code: 200,
data: {
list: [
{
name: "anyone",
age: 18,
},
],
},
},
// method path delay(ms)
"POST /api/v0/reset 1000": (req, res) => {
res.json({
success: true,
code: 200,
data: { username: req.body.username },
});
},
};

本文参考了掘金文章，我做了些改动以便让它能够在 webpack5 上运行。