前端开发不仅需要运用各种前端技术，还需要和后端开发人员密切合作。其中一个重要的环节是前后端数据交流。常见的方法是让后端提供一份 API 文档，并在前端请求时调用。然而在开发初期，API 尚未开发完成，又或者后端开发人员往往比较忙碌，可能无法在一些紧急情况下及时配合前端调试。此时，如何模拟服务器数据就变得尤为重要了。Webpack-dev-server 提供了一种方便快捷的方法来模拟服务器数据。
Webpack-dev-server 是什么
Webpack-dev-server 是一个基于 Webpack 构建开发服务器。它支持实时重载，自动刷新浏览器等功能。开发人员可以方便地在本地开发环境模拟服务器环境，而无需依赖后端。Webpack-dev-server 支持多种模式，其中最常用的有两种：inline mode 和 iframe mode。
inline mode
在 inline mode 模式下，Webpack-dev-server 会启动一个 WebSocket 服务器，监听 assets 的变化，并将编译完成的文件实时推送给客户端。可以通过配置 devServer.inline=true 启用此模式。
iframe mode
在 iframe mode 模式下，Webpack-dev-server 会在页面中嵌入一个 iframe，将编译后的文件加载在 iframe 中，并将 WebSocket 服务器启动在 iframe 中。可以通过配置 devServer.inline=false 和 devServer.iframe=true 启用此模式。
如何使用 Webpack-dev-server 模拟服务器数据
Webpack-dev-server 默认会将编译后的文件输出到内存中，而非硬盘上的文件。因此，我们可以在内存中创建一个 json 文件，然后在 Webpack-dev-server 中创建一个路由，将请求代理到这个 json 文件中。这样我们就可以方便地模拟服务器数据了。
示例代码如下：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
---------- -
----------- -
-- ------ ----------
--------------------- ----- ---- -- -
-- --------
----------
----- ----- -----
------ -----------------------
---- ---
---
---
-
--
-- ---
-使用时，只需在前端代码中发起请求 fetch('/api/users')，就可以得到模拟的服务器数据了。
总结
利用 Webpack-dev-server 来模拟服务器数据，可以极大地提高前后端协作的效率。我们可以在前后端配合不充分时，或者 API 还未开发完成时，提前完成前端的开发工作。同时，我们也可以利用 Webpack-dev-server 的实时重载和自动刷新浏览器等功能，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1b45f48841e9894deb44f