create-react-app 中设置反向代理、项目打包资源引入路径设置及 map 文件

1、配置反向代理

（1）porxy 配置一个代理

　　修改package.json文件

"proxy":"http://teng.com/website/web",

（2）proxy配置多个代理

　　注意：若create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置即可， 配置成如下

  "name": "wangguan",
  "version": "0.1.0",
  "private": true,
  "proxy":{
    "/api1": {
        "target": "http://teng.com/website/web",
        "ws": true
      },
  　"/api2": {
        "target": "http://teng.com/website/web",
        "ws": true
      }
  },

　　但是如果 create-react-app 的版本在高于于 2.0 的时候， 以上配置就会报错：提示只支持string类型,不支持object 即 ： "proxy" in package.json must be a string.

　　解决方案：

　　<1> 安装  http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

　　<2>在src目录下创建 setupProxy.js 文件，并写入一下代理设置

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(proxy('/api1', {
    target: 'http://teng.com/website/web',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api1": "/"
    },
  }));
  app.use(proxy('/api2', {
    target: 'http://teng.com/website/web',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api2": "/"
    }
  }));
};

　　亲测有效 ， 相关配置可见官网 ： https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

 

2、项目打包时，要想将引入资源的路径改成相对路径（‘./’），可直接在 package.json 文件中添加以下配置即可

"homepage": "."

 3、取消打包生成的 .map 文件

引用 antd 后设置按需引入后，在打包的时候会生成很多 .map 文件，所以需要在 config-overrides.js 中插入下边的代码

process.env.GENERATE_SOURCEMAP = "false";

即：

/* config-overrides.js */
const { override, fixBabelImports, addLessLoader } = require("customize-cra");

process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports("import", {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#1DA57A' },
  })
);

 

转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/11014926.html