Webpack中文：
DevServer | webpack 中文文档

  1. chapter
  2. ├─babel.config.js
  3. ├─package-lock.json
  4. ├─package.json
  5. ├─postcss.config.js
  6. ├─webpack.config.js
  7. ├─src
  8. |  ├─index.html
  9. |  └index.js

⚠️ 注意 devServer.proxy只能在开发环境使用

proxy

当我们在开发需要请求一个接口的时候需要后端提供一个接口地址，就像这样：

  1. // 使用 axios 对接口进行请求
  2. import axios from "axios";
  3. import React, { Component } from "react"; 
  4. import ReactDom from "react-dom";
  6. class App extends Component {
  7.   componentDidMount(){
  8.     axios.get("/react/api/header.json").then(res=>{
  9.       console.log(res)
  10.     })
  11.   }
  12.   render() {
  13.     return <div>Hello Word!</div>
  14.   }
  15. }
  17. ReactDom.render(<App />,document.getElementById("root"));

但是这样显然不是很合理，我们都知道在我们进行接口联调的时候接口地址是分为「测试环境」和「线上环境」的，如果这样把路径直接写到代码中不利于我们进行修改，那么如何进行配置实现请求转发呢？

配置devServer.proxy：

  1. module.exports = {
  2.   mode: "development",
  3.   devtool: "eval-cheap-module-source-map",
  4.   contentBase: "./dist",
  5.   open: true,
  6.   hot: true, 
  7.   hotOnly: true,
  8.   // 当接口遇到 /react/api 开头就转发到 http://www.dell-lee.com 作为前缀
  9.   proxy: {
  10.     "/react/api": "http://www.dell-lee.com"
  11.   },
  12.   // ...
  13. }

这样就能看到header.json的数据啦。
image.png

proxy.pathRewrite

假设现有有个场景，后端说：我现在header.json的接口还没有开发完成，你先使用demo.json接口。
这个时候我们就能在代码中直接将header.json改成demo.json的接口。

  1. axios.get("/react/api/dem.json").then(res=>{
  2.   console.log(res)
  3. })

但这样后期接口开发完成我还需要带业务代码中进行查找然后进行修改，如何能做到修改配置文件就可以做到接口请求到demp.json呢？

配置devserver.pathRewrite：

  1. module.exports = {
  2.   mode: "development",
  3.   devtool: "eval-cheap-module-source-map",
  4.   contentBase: "./dist",
  5.   open: true,
  6.   hot: true, 
  7.   hotOnly: true, 
  8.   // 当接口遇到 /react/api 开头就转发到 http://www.dell-lee.com 作为前缀
  9.   proxy: {
  10.     "/react/api": {
  11.       target: "http://www.dell-lee.com",
  12.       // 将 header.json 更改为 dome.json
  13.       pathRewrite: {
  14.         "header.json": "demo.json"
  15.       }
  16.     }
  17.   }
  18. },
  19.   module: {
  20.     // ...
  21.   },
  22. // ...
  23. }

这样我们就能请求到demo.json接口啦（虽然network显示的路径还是header.json但实际请求到的是demo.json路径）。
image.png

更多的配置项：
1、devServer.proxy
DevServer | webpack 中文文档
2、http-proxy-middleware
GitHub - chimurai/http-proxy-middleware: The one-liner node.js http-proxy middleware for connect, express, next.js and more