webpack-mocker

###webpack-mocker webpack-mocker is a webpack-dev-server middleware that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.

Install

$ npm install webpack-mocker --save-dev

Usage

webpack-mocker dev support mock, configured in mock.js

//https://github.com/nuysoft/Mock/wiki/Mock.Random
const mockjs = require('mockjs');
const { delay } = require('webpack-mocker');
const useMock = process.env.useMock === 'true';
const dataWrap = (data)  =>{ return mockjs.mock({code:0,data:data,msg:'success',isMock:true})}
const proxy = {
  'GET /api/list/':dataWrap({
    "apps|10": [{
      "application_id": "@id",
      "type": 2,
      "name": "@name",
      "description": "xinde",
      "avatar_url": "@image(36X36)"
    }],
  }),
  'GET /api/apikeys':dataWrap({
    "apikeys|10": [{
      "id": "@id", //部署id
      "name": "@name", //应用名
      "create_time": new Date().getTime() / 1000, //提交时间
      "avatar_url": "@url", //待定,
      "limit_text": "无",
      "limit_value": "", //待定
      "apikey": "@guid",
    }],
    total: 50
  })
};
module.exports = !useMock ? {} : delay(proxy, 100);

Using with Webpack

Change your config file to tell the dev server where to look for files: webpack.config.js.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const { applyMock }  = require('webpack-mocker');
 
module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  devtool: 'inline-source-map',
+ devServer: {
+   ...
+   before(app){
+     applyMock(app,path.resolve('./mock.js'))
+   }
+ },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

License

MIT © Overblog