0.1.2 • Published 2 years ago
webpack-dev-mock-serve v0.1.2
webpack-dev-mock-serve
English | 中文
Features
- Automatically read the files under mock (the directory name can be configured), and generate the mapping relationship between mock API paths and files
- Support json (recommended for static data), js (recommended for dynamic data) file formats
- Supports dynamic addition, deletion, and modification of mock files at runtime after startup, without restarting the server
- The configuration file of the mock API will be automatically generated at startup. You can modify the
enable
field to enable/disable the mock globally, or enable/disable the mock API individually - Supports the inclusion of variables in the path. It is agreed that the part of the path starting with
$
is a variable, and the variable name after$
can be obtained throughreq.params
in js file
Install
// npm
npm install webpack-dev-mock-serve -D
// yarn
yarn add webpack-dev-mock-serve -D
Usage
const mockServer = require('webpack-dev-mock-serve');
// webpack 5 configation
module.exports = {
devServer: {
setupMiddlewares(middlewares, devServer) {
mockServer({
devServer
});
return middlewares;
}
}
}
Options
Param | Type | Default | Description |
---|---|---|---|
devServer | Object | webpack-dev-server instance | |
mockDir | String | mock | Mock files root path |
watch | Boolean | true | Whether to listen the mock directory |
switch | Boolean | true | Whether can switch on/off mock API |
Demo
Directory structure
┌── webpack.config.js
├── /mock/
│ ├── /book/
│ │ ├── list.json
│ │ ├── /detail/
│ │ │ └── $id.js
│ │ └── /$category/
│ │ └── $name.js
webpack.config.js
configation
const mockServer = require('webpack-dev-mock-serve');
// webpack 5 configation
module.exports = {
devServer: {
setupMiddlewares(middlewares, devServer) {
mockServer({
devServer
});
return middlewares;
}
}
}
mock/book/list.json
[
{
"id": 1,
"category": "story",
"name": "红楼梦"
},
{
"id": 2,
"category": "story",
"name": "西游记"
}
]
mock/book/$category/$name.js
module.exports = (req, res) => {
const { params: { category, name } = {} } = req;
if (category === 'story' && name === '红楼梦') {
return {
"id": 1,
"category": "story",
"name": "红楼梦"
}
} else {
// ...
}
}
If the options switch
is true
,then a configation file .mockrc
will be generated under mock
,you can edit the file to control switch on/off all or single mock API. The configuration file format is as follows:
// mock/.mockrc
{
"enable": true,
"rules": {
"/book/list": true,
"/book/detail/$id": true,
"/book/$category/$name": true
}
}