在前端开发中，我们常常使用 webpack 进行模块打包。webpack-dev-server 是 webpack 官方提供的一个开发服务器，它可以在本地快速启动一个服务器用于开发环境的调试。
当我们需要与后台沟通时，往往需要自己模拟接口数据来完善前端开发。这时我们可以使用 mockjs 或 json-server 等工具模拟数据。但是每次修改接口数据都需要重新启动服务，效率较低。
因此，我们可以使用 webpack-dev-mock 来模拟接口数据且不需要重启服务。这篇文章将详细介绍 npm 包 webpack-dev-mock 的使用方法。
webpack-dev-mock 简介
webpack-dev-mock 是 webpack-dev-server 的一个插件，它可以扩展 webpack-dev-server 的 mock 功能。webpack-dev-mock 的特点是：
- 支持本地 JSON 文件和远程接口数据的 mock。
- 零配置：只需要在 webpack 配置中增加一个插件即可。
- 支持动态 Mock：即可以在 webpack-dev-server 运行时动态修改 mock 数据。
安装与配置
安装
npm install webpack-dev-mock --save-dev
在 webpack 配置中增加插件：
-- -------------------- ---- -------
-- -----------------
----- -------------- - ---------------------------
-------------- - -
-- ---
---------- -
------- -----------------
-- ----- --------- ------------- --- --------
--
-- ---
-在这里，WebpackDevMock 为快速启动一个 mock 服务，并支持动态修改 mock 的方法。
mock 文件集成
在项目中，我们可以将 mock 数据放在一个文件夹中，并通过配置来实现 mock 的加载。
默认情况下，webpack-dev-mock 会将 mock 目录下的所有 *.json 文件作为 mock 数据加载到内存中。如果需要定制文件路径，可以使用 configuration。
-- -------------------- ---- -------
-- -----------------
----- -------------- - ---------------------------
-------------- - -
-- ---
---------- -
------- ----------------
-- ---
----- ----------
-- --------
-------- --------------
---
-- ----- --------- ------------- --- --------
--
-- ---
-当 mockDir 参数被指定，webpack-dev-mock 会将指定路径下的所有 *.json 文件作为 mock 数据加载到内存中。
mock 文件示例：
// ./myMockDir/myMock.json
{
"code": 0,
"msg": "success",
"data": {
"hello": "world"
}
}API Mock 与 Proxy
webpack-dev-mock 同时支持 API Mock 与 Proxy。
在写 mock 之前，我们先来了解下这两者的区别：
- API Mock 是将用户在前端模拟的数据，在无服务端支持的情况下实现的一种前后端数据沟通方式。是直接对前端进行静态文件的配置，对数据进行模拟、Mock。
- Proxy 是将用户在前端的数据请求发送给真实的服务，然后返回数据结果，类似于正常的 AJAX 请求的方法，通过匹配 URL 规则，将前端请求通过代理转发至后台API系统。是直接通过将请求转发至系统代理层，通过代理的方式将前端的请求转发至后端的具体的API系统，整个过程和正常的 Ajax 响应没有差别。
接下来，我们来看下两种类型 mock 的作法：
API Mock
-- -------------------- ---- -------
-- ---------------------
-
------- ----
------ -------
------- -
----- --
------- ---------
--------------- -------
-
--- -------------------- ---- -------
-- -----------------
----- ---- - ---------------
----- -------------- - ---------------------------
-------------- - -
-- ---
---------- -
------- ----------------
---- -
----------- ----------------------- -------------------------
--
---
-- ----- --------- ------------- --- --------
--
-- ---
-通过 api 选项进行配置，当匹配到该规则的请求 URL 时，会直接返回并结束请求。
Proxy
-- -------------------- ---- -------
-- -----------------
----- -------------- - ---------------------------
-------------- - -
-- ---
---------- -
------- ----------------
-- -- ---- -----------
------ -
------- -
------- --------------------------------------
------------- -----
------------ - -------- -- --
--
--
---
-- ----- --------- ------------- --- --------
--
-- ---
-通过 proxy 选项进行配置，当命中规则时，会通过代理将请求转发到 http://jsonplaceholder.typicode.com。
动态 Mock 修改
通过使用 webpack-dev-mock，我们可以在 mock 启动后动态修改 mock 数据，极大地提高了 mock 数据的开发效率。
-- -------------------- ---- -------
-- -----------------
----- ---- - ---------------
----- -------------- - ---------------------------
----- -------- - --------------------------------
-- ------- --
----- ------- - -
------------- -----------
-
-------------- - -
-- ---
---------- -
------- ----------------
---- -
----------- ----- ---- -- -
----- - ----- - - ---
-- ------------ --
----- - ----- - ------------- -------- - - - --------
-------------------------------- -- -
-- -------------- -
---------------------- - ----------
- ---- -
------------- - ----------
-
--
------------------
--
--
---
-- ----- --------- ------------- --- --------
--
-- ---
-在 before 方法中传入函数，函数的响应在请求收到后返回的对象中 response 属性中，可以通过 request 参数中的信息更改相应的数据。这里的 res.json(mockData) 键名需要对应 mock 数据中的键名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf9b5cbfe1ea0610609