React 重写 Webpack

React 重写Webpack

1、 需求背景

1.1 React cli 的webpack可能不满足我们的需求，我们需要对其重写修改或添加config。

1.2 比如你在本地打包需要加每次打包的git版本号（只供参考）。

2、安装 react-app-rewired 和customize-cra 依赖包

2.1 因为只在本地使用，所以 --save-dev

2.2 这里介绍使用react-app-rewired。它的作用是用来帮助你重写react脚手架配置
react-app-rewired@2.x版本需要搭配customize-cra使用。
customize-cra的作用是帮助你自定义react脚手架2.x版本配置

npm i react-app-rewired customize-cra --save-dev

3、在根目录下新建文件config-overrides.js文件

const { override, addWebpackAlias} = require('customize-cra');
const path = require('path');
module.exports = override(    
    addWebpackAlias({      
        ["@"]: path.resolve(__dirname, "src") 
    })
)

4、修改package.json

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",

5、运行 npm run build 报错（version 是 8.1.2）

5.1 可以安装yarn version v1.22.17 来解决。
5.2 安装适合的npm 版本。

6、分环境打包（如果是在本地打包，不是使用Jenkins）

6.1 执行 yarn build 默认的 process.env.NODE_ENV是production。
6.2 所以，我需要将测试环境下打包时使用的接口地址指定为 env.development中的接口地址，我分别写了两份配置文件 .env.development 以及 env.production，但是根据以上create-react-app 的官方文档，在执行 build 命令时，默认是加载 .env.production 文件中的变量，所以我在测试服务器上执行 npm run build 命令时就会使得接口地址被指定为生产环境的接口地址，这显然不是我想要的。

怎么办呢？

7、分development 和 production 环境

7.1 在根目录新建文件 .env.development 和 .env.production 文件

# .env.development
REACT_APP_BASE_URL='http://development.xxx.xxx'
# env.production
REACT_APP_BASE_URL='http://production.xxx.xxx'

7.2 安装 dotenv-cli
官方文档也给了我们答案——可以使用 dotenv 来做环境变量的管理（dotenv 可将环境变量从 .env 文件加载到 process.env中。）

因为我们要在命令行中使用，所以我们需要使用 dotenv-cli。

执行 yarn add dotenv-cli --save-dev

7.3修改 package.json 中的 scripts来指定环境

"scripts": {
    "start": "react-app-rewired start",
    "build:dev": "dotenv -e .env.development react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

8、prodution 执行 yarn build development 执行yarn run build:dev

完结撒花