Middleware for mocking data, based on webpack-dev-server.
- Both support React and Vue.
- Support hot reloading mock data.
- Support multiple versions of webpack-dev-server
- RESTful API mock support
- Provide built-in mock template files
- Variable methods to generate mock data(json/js object/function)
npm i mock-middlerware-plugin -D
// if use Mockjs, you should install it either
// npm i mockjs -D
Add the code in your root file (e.g. index.js or app.js)
Then webpack will watch mock directory either.
And the browser will reload page after you modify mock files.
// react18
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);
// ...
if (process.env.NODE_ENV === 'development') {
// Don't use "require"! Otherwise webpack will stop when mock file has error
import('../mock');
}
- webpack-dev-server(v4.7.0+)
const mockMiddlewarePlugin = require('mock-middlerware-plugin');
//
devServer: {
// ...
proxy: {
// your config
},
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error('webpack-dev-server is not defined');
}
middlewares.push(
mockMiddlewarePlugin(path.resolve(process.cwd(), './mock'),{ log: false })
);
return middlewares;
},
}
- webpack-dev-server(v4 ~ v4.7.0)
devServer: {
onAfterSetupMiddleware: function (devServer) {
if (!devServer) {
throw new Error('webpack-dev-server is not defined');
}
devServer.app.use(mockMiddleware(path.resolve(process.cwd(), './mock')));
},
}
- webpack-dev-server(v3+)
devServer: {
after: (app) => {
app.use(mockMiddleware(path.resolve(process.cwd(), './mock')));
},
}
Since v1.1.0, we support some template mock files in the package.
By the util, you can copy template files quickly to your target directory.
// webpack.dev.conf.js
const mockUtil = require('mock-middlerware-plugin/util');
mockUtil.initFiles(baseDir);
// baseDir is optional, if omitted , default is 'process.cwd()'
// it will copy the template files into 'baseDir/mock', default is './mock'
// if baseDir/mock exists, the function will return, and will not your override your files
There must be a index.js file in your root mock directory(such as ./mock), the data structure is as follows:
// ./mock/index.js
module.exports = {
// [route]: [mock data],
'/list/query' : mockJson,
'post /list/add': (req, res) => {
res.send({ msg : "success" })
}
};
route: [method][space][path]
method: GET/POST/PUT/DELETE; (also can be lowercase); optional, GET method if omitted;
space: when the method is omitted, the space should be omitted too.
path: the request url;
There are variable methods to generate mock data.
- use json file
const mockJson = require('./list/query.json');
module.exports = {
'get /list/query/:id': mockJson,
}
// You can also make it simpler
module.exports = {
'get /list/query': require('./list/query.json'),
}
- use javascript object
module.exports = {
'get /list/query': {
code: 0,
msg: '',
data: [],
},
}
- use function, just like in Express
// According to the req.query/body parameter judgment, return different results
module.exports = {
'get /list/query': (req, res) => {
res.send({
code: 0,
msg: '',
data: [],
})
}
}
- All the before methods support Mockjs. Remember to use Mock.mock() to wrap the origin data.
// json file
{
"list|1-10": [
{
"id|+1": 1
}
]
}
'/list/mock': Mock.mock(require('./list/mock.json'))
// js object or function
'/list/mock': (req, res) => {
const data = Mock.mock({
req: req.query,
'list|1-10': [
{
'id|+1': 1,
},
],
});
res.send({ data });
},
When there are too many api to mock, the index.js in root directory may look so huge. So use subfiles to make the root file more compact.
// ./mock/list/index.js
module.exports = {
'get /list/query': mockJson,
// ...
}
// ./mock/index.js
const listApi = require('./list/index.js');
module.exports = {
// ...
...listApi,
}
- mockMiddlewarePlugin(dir, [options])
dir: string; // your mock root directory
options: {
log: boolean; // whether show request log in terminal; default is true!
}
// log demo
// [mock proxy]: GET /list/mock
- util.initFiles([baseDir])
baseDir: string; // if omitted, default is current root directory(process.cwd())
When you need to use req.body in your mock function, you should add 'body-parser' before the mock plugin!
const bodyParser = require('body-parser');
// .webpack.config.js(v5+)
setupMiddlewares: (middlewares, devServer) => {
middlewares.push(bodyParser.json());
middlewares.push(bodyParser.urlencoded({ extended: true }));
middlewares.push(
mockMiddlewarePlugin(path.resolve(process.cwd(), './mock'),{ log: false })
);
}
// ./mock/index.js
'post /list/query': (req, res) => {
res.send({
reqParams: req.body,
code: 0,
msg: '',
data: [],
})
}