webpack-dever-server+http-server配置模拟数据服务

本文后续可能会更新，戳github/levinit-itnotes

---

使用http-server作为模拟数据的web服务器，配置webpack-dev-server的proxy参数转发请求到模拟数据服务器上。

---

假如：项目源码目录在项目目录下的src文件中，模拟数据在src/mock中

• src/ 源码目录

  • mock/ 模拟数据目录

    • data.json 一个模拟数据文件
  • index.js 项目入口文件
  • ...各种其他文件
• webpack.config.js 项目webpack配置文件
• package.json 项目配置文件
• server.sh 一个方便启动模拟数据服务器和webpack-dev-server的脚本文件（见后文）
• ...其他文件

---

首先在项目中（使用npm或yarn）安装webpack-dev-server和http-server（当然全局安装的亦可）。

然后打开终端中，进入到项目项目根目录（即src所在目录）：

1. 运行http-server，指定端口为8888，web服务根目录为srchttp-server /src -p 8888
2. 运行webpack-dev-server

3. 在项目中的请求就会转发到http-server下
   在上文配置中，localhost:8888/mock/下的请求，会转发到localhost:8080/mock下。示例：

   //some codes...
   $.ajax({type:'get',url:'./mock/data.json',success:fn})
   //some codes...

   运行项目后，ajax请求地址是localhost:8888/mock/data.json ，根据配置，该请求被转发到http-server服务上的loalhost:8888/mock/data.json

为了方便使用，可建立一个名为server.sh的shell脚本，里面写入：

#!/bin/sh
nohup http-server /src -p 8888 &
npm start  #如用yarn 则是yarn start

给脚本赋予可执行权限chmod +x ./server.sh。 这样，以后只需在（终端中）项目根目录下执行./server.sh即可启动服务，进行开发调试啦。

另，http-server运行命令中添加--cors选项可配置cors（跨域资源共享）：http-server --cors 。