持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

背景

我们平常开发中，我们会等待后端上好接口服务，再进行联调。
在这之前，前后端会提前约定好接口，接口字段，格式，以及接口文档和联调时间。
这样前端在开发时，就可以根据约定好的接口，格式，接口字段，做本地数据的mock。等到服务端的接口上线，只需要把服务端的接口地址换成服务端的就可以了。
这样，比较节省时间。因此会有这样的一个需求，那么webpack就可以替我们解决这个需求。

创建一个服务

首先我们需要创建一个服务，作为接口服务，新建一个server.js文件；

然后安装一个express,去快速搭建一个服务；

npm install express

package.json里面显示安装的express:

写一下服务 server.js文件：

var  express =require ('express');
var app=express();
app.get('/api/info',(req,res)=>{
    res.json(
        {
            name:'静静',
            age:18
        }
    );
})
app.listen('9000');

关于express详情可以看这里，expressjs.com/en/4x/api.h…

请求服务

跑一下服务：

node server.js

输入我们的服务地址访问一下： http://localhost:9000/api/info

可以成功访问到。

前端项目里访问接口

在src/index.js里面去写一些通讯代码，去请求服务上的api/info接口。
首先要安装一个axios,如下：

npm install axios

代码如下：
src/index.js

import axios from 'axios'
console.log("hello 浅唱");

// import img01 from "./images/01.jpg";
// console.log(img01)
// console.log('热更新啦');

axios.get('http://localhost:9000/api/info').then(res=>{
    console.log(res)
})

通讯代码里，先引入axios, 然后再去写代码，运行server服务，如下：
npm run server
这个命令不太清楚的可以去看我上篇文章哦原来这就是传说中的热更新啊，跟我一起一键解放双手吧

跨域报错了

运行后看结果：

这里的报错信息是不是很熟悉，错误信息大概意思是，跨域导致的报错，这也是情理之中；
因为，我是用8001端口去请求9000端口，属于不同端口，是不同的源，所以跨域了，浏览器是不支持这种不同源的。
所以我们要解决一下跨域的问题。

解决跨域

使用Webpack提供的devServer里面的proxy值去设置服务器代理；
这种原理是通过转发接口地址去解决跨域。
在webpack.config.js中去配置，如下：

devServer: {
  contentBase: "./dist",
  open: true,
  port: 8081,
  proxy: {
      "/api": {
          target: "http://localhost:9000/",
      },
  },

},

这里这样设置的意思是，请求地址里面如果有api这个字符，我们就把请求的地址转发成我们配置的"http://localhost:9000/"这个地址。
然后，src/index.js,也要修改一下，如下：

import axios from 'axios'
console.log("hello 浅唱");

// import img01 from "./images/01.jpg";
// console.log(img01)
// console.log('热更新啦');

axios.get('/api/info').then(res=>{
    console.log(res)
})

我们再重启一下服务，虽然我们设置成了热更新，但是，配置里面有改动代码的话，还是要重启一下服务的，才能生效。
npm run server
最后看一下效果：

成功拿到了服务返回的响应信息。
到此，我们模拟的一个前后端交互通讯，算是完成了，其中我们启动⼀个服务器，mock⼀个接⼝。

注意点，踩坑点

在这个过程中，一定一定要一直把server.js运行着呀，不然什么都白瞎，这是我自己的实践时，犯得一个错误，卡了半天，不知道问题出在哪里。

简单把WebpackDevServer简单概述一遍

作用

提升开发效率的利器

安装

npm install webpack-dev-server@3.11.0

配置

修改下package.json:

"scripts": {
   "server": "webpack-dev-server"
}

在webpack.config.js配置：

devServer: {
    contentBase: "./dist",
    open: true,
    port: 8081

},

contentBase:告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
open：开启服务时，是否自动打开浏览器。
port：指定要监听请求的端口号。
具体详情链接：www.webpackjs.com/configurati…

总结

联调期间，前后端分离，直接获取数据会跨域，上线后我们使用nginx转发，开发期间，webpack就可以搞定这件事。
启动了⼀个服务器，mock⼀个接口。
项目中安装axios工具。
修改webpack.config.js 设置服务器代理，并且修改index.js。

模拟前后端数据通讯、联调环境，以及解决跨域问题

背景