1. 创建项目

npx create-reaect-app project-name

2. 安装相关依赖

// 安装生产环境依赖，目前只想到这几个依赖，后续需要再装。  
npm i react-router@5 react-router-dom@5 antd-mobile axios  

// 安装开发环境依赖  
// 这两个依赖主要是为了修改 create-react-app 默认的 webpack 配置
npm i react-app-rewired customize-cra -D

安装 react-router 和 react-router-dom 如果不指定版本默认会装最新 v6 版本，v6 版本和 v5 版本有些区别，比如 Switch 组件替换成了 Routes；具体可以查看 react-router 官网 v6迁移指南

3.修改 package.json 中 script 用 react-app-rewired 启动

/* package.json */
"scripts": {
    - "start": "react-scripts start",
    + "start": "react-app-rewired start",
    - "build": "react-scripts build",
    + "build": "react-app-rewired build",
    - "test": "react-scripts test",
    + "test": "react-app-rewired test",
}

4.在根目录创建config-overrides.js 用于修改 webpack 默认配置

配置 antd 按需加载，移动端适配 pxtorem，less 文件支持，import alias，devServer 等

首先安装一些依赖 npm i postcss-pxtorem less less-loader

/**
 * [description]
 * 使用过create-react-app（以下简称cra）的朋友都知道，这是react官方的一款脚手架工具，
 * 使用过内部集成了使用react-app-rewired,使用此插件可以暴露出webpack
 * 但是！react-app-rewired2.x以后，不再支持injectBabelPlugin的方式，需要安装customize-cra。
 * npm install customize-cra --save-dev
 * 所以新建config-overrides.js可以读取到该文件
 */
const {
  override,
  overrideDevServer,
  fixBabelImports,
  addPostcssPlugins,
  addLessLoader,
  // addDecoratorLegacy,
  addWebpackAlias,
  adjustStyleLoaders,
} = require('customize-cra');
const path = require("path");

module.exports = {
  /**
   * webpack 配置
   */
  webpack: override(
    /**
     * antd 按需加载
     * 如果使用 antd-mobile 2.x 的话可以在这里面配置一些按需加载（参考 atnd 官网配置），
     * 使用 5.x 的话官方建议是不需要按需加载了；
     * 因为 antd-mobile 支持基于 Tree Shaking 的按需加载，
     * 大部分的构建工具（例如 webpack 4+ 和 rollup）都支持 Tree Shaking
     */
    // fixBabelImports('import', {
    //   libraryName: 'antd-mobile',
    //   style: 'css',
    // }),
    /**
     * postcss-pxtorem 配置
     */
    addPostcssPlugins([
      require('postcss-pxtorem')({
        rootValue: 37.5, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
        unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字
        propList: ['*'], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性
        selectorBlackList: [], // （数组）要忽略并保留为 px 的选择器。
        replace: true, // 替换包含 rems 的规则，而不是添加回退。
        minPixelValue: 0, // 最小的转化单位
        exclude: /node_modules/i, // 要忽略并保留为 px 的文件路径
        // 具体参数可以看官方文档 https://github.com/cuth/postcss-pxtorem#options
      }),
    ]),
    /**
     * 支持 less 文件
     * [安装less 和 less-loader]
     * npm i less less-loader
     */
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {}, // 更改 less 的一些变量，比如覆盖 antd 的主题颜色
      }
    }),
    // create-react-app 版本 5x 使用的是 webpack 5x，配置 less 需要新增下面 adjustStyleLoaders 配置
    adjustStyleLoaders(({ use: [, , postcss] }) => {
      const postcssOptions = postcss.options;
      postcss.options = { postcssOptions };
    }),
    // 支持装饰器写法
    // addDecoratorLegacy(),
    // 配置 alias
    addWebpackAlias({
      ['@']: path.resolve(__dirname, './src'),
    })
  ),
  /**
   * devServer 配置
   */
  devServer: overrideDevServer((config) => {
    return config;
  }),
};

最终的 config-overrides.js 配置就是以上代码，但是我配置 pxtorem 的时候发现一直不生效，查了一下，发现是 customize-cra 库的 addPostcssPlugins 方法对 CRA 5 不起作用，具体可以看这个 issue；customize-cra 这个库看他的 commit 也很久没有更新了，可以试着 npm run eject 暴露 CRA 的 webpack 配置自行修改，不过这个操作是不可逆的；或者换 craco 这个库试试。npm run eject 之后可以参考这篇文章去配置webpack，配置 less 和 pxtorem 是没问题的。我最终是使用 npm run rject 暴露 webpack 配置去修改的。

5. reset css

create-react-app 官网 介绍，使用 react-react-app 创建的项目已经自带了 PostCSS Normalize，但是我根据官网的配置，在 index.css 中 @import-normalize; 发现不生效，在 github 上找到了 issue，通过安装 normalize.css 并且在 index.js 或者 App.js 中引入可以解决；

// 安装
npm i normalize.css

// index.js or App.js
import 'normalize.css'

6. 配置 less 全局变量

有时候我们有一些公共样式或者仓用的主题颜色背景等，可以放在一个全局的 less 文件中，就不需要每次使用都映入了。 先安装 npm i style-resources-loader; 之后在 webpack.config.js 中 module 的 rules 的 less 配置修改成下面的配置：

// less loader
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'icss',
      },
    },
    'less-loader'
  ).concat({
    loader: 'style-resources-loader',
    options: {
      patterns: [path.resolve(__dirname, '../src/global.less')]
    }
  }),
  sideEffects: true,
},
// less module
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ).concat({
    loader: 'style-resources-loader',
    options: {
      patterns: [path.resolve(__dirname, '../src/global.less')]
    }
  }),
},

总结

本次使用 create-react-app 搭建项目基本就完成了

参考： blog.csdn.net/quhongqiang… blog.csdn.net/liangzhenme… blog.csdn.net/weixin_4240… juejin.cn/post/697164… zhuanlan.zhihu.com/p/528295053 www.qianduanheidong.com/blog/articl…