首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Webpack5结合mockjs

Webpack5结合mockjs

作者头像
治电小白菜
发布2022-09-28 15:28:44
9303
发布2022-09-28 15:28:44
举报
文章被收录于专栏:技术综合技术综合技术综合

webpack5之前使用的是devServer.before来配置mock服务, 到了webpack5则改为devServer.setupMiddlewares

参考文档: https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares

mock相关代码

  1. mock/index.js
const Test= require('./apis/test')

const obj = {
  ...Test,
}

module.exports = function (middlewares, devServer) {
  Object.keys(obj).forEach((v) => {
    obj[v](devServer)
  })

  return middlewares
}
  1. apis/test.js
const { handleReq } = require('../utils')

module.exports = {
  getUser: (devServer) => {
    handleReq(devServer, {
      url: '/users',
      method: 'get',
      json: 'userInfo.json',
    })
  },
}
  1. mock/utils.js
const Mock = require('better-mock')
module.exports = {
  handleReq: (devServer, config) => {
    const { method, url, json } = config
    devServer.app[method]('/mock/api' + url, function (_, res) {
      res.json(Mock.mock(json))
    })
  },
}

webpack配置

devServer: {
    setupMiddlewares: './mock/index.js'
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-09-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • mock相关代码
  • webpack配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档