VikiLee/webpack-mock-plugin

该plugin基于webpack devServer和mockjs实现本地mock

install

npm install @xxx/mock-plugin --save-dev

usage

step1

使用该插件需要真对不同的情况进行使用，因为不同的脚手架使用WebpackDevServer的方式不同，所以没有一个完全契合的方案来使用

1、普通webpack配置
这种适用于普通的

const MockPlugin = require('@xxx/webpack-mock-plugin');
module.exports = {
  plugins: [
    new MockPlugin({
      prefix: '/mock/api'
    })
  ]
};

2、用react-creat-app创建的项目 由于用cra创建的项目，webpack devServer是它自己的配置，用户通过配置webpack的devServer它会忽略，所以不能像普通的配置那样配置。你需要eject吐出配置，然后在scripts/start.js中配置。找到serverConfig对象，然后如下配置。

const MockPlugin = require('@xxx/webpack-mock-plugin');
// Serve webpack assets generated by the compiler over a web server.
const serverConfig = createDevServerConfig(
  proxyConfig,
  urls.lanUrlForConfig
);
new MockPlugin({
  prefix: '/mock/api',
  config: serverConfig
})

3、用customize-cra创建的项目
用customize-cra创建的项目需要在config-overrides.js中进行配置

const { 
  override, 
  overrideDevServer
} = require('customize-cra');
const MockPlugin = require('@xxx/webpack-mock-plugin');
module.exports = {
  webpack: override(
  devServer: overrideDevServer(
    (config) => {
      new MockPlugin({
        prefix: '/mock/api',
        config
      })
      return config
    }
  )
}

4、用vue-cli创建的项目
用vue-cli创建的项目，可以通过vue.config.js配置

const MockPlugin = require('@xxx/webpack-mock-plugin');
module.exports = {
  devServer: {
    before(app) {
      new MockPlugin({
        prefix: '/mock/api',
        app
      })
    }
  }
};

5、其他框架，暂时....不支持

step2

项目根目录下创建mock文件夹，里面就是mock的json文件，文件路径就是请求路径。

比如有/mock/user/user_info.json

{
  "code": 0,
  "msg": "success",
  "data": {
    "username": "@name()",
    "age": 28,
    "email": "@email",
    "permissions|1-9": [
      "affiliate-r",
      "affiliate-w",
      "campaign-r",
      "report-r",
      "logs-r",
      "permission-r",
      "campaign-w",
      "permission-w"
    ],
    "role_type": 1
  }
}

则你的请求url为/mock/api/user/user_info

关于mock模拟数据的语法，可以点击这里了解更多。

注意事项

1、如果你配置了webpack devServer的代理，又设置了mock，而且他们前缀一样，则会导致mock请求无效。
2、更新mock json文件可以不用重启，如果是新增mock json文件，需要重启请求才有效。