Create React App是一个常用的React脚手架，本文采用“暴露”webpack文件的方法（eject）进行修改webpack配置。

安装流程

全局安装脚手架 (需要注意，电脑上需要有node.js且版本为v14+最佳)

cnpm i create-react-app -g
create-react-app --version

如果您想使用yarn来进行管理的话，这里也可以全局安装一个

cnpm i yarn -g

现在，您可以利用脚手架来创建一个官方的Create-react-app项目了(会很漫长，请耐心等待)

create-react-app <项目名>

或者

yarn create react-app <项目名>
这里推荐使用yarn安装，会更快一点
yarn create react-app my-react-app

等待进度条结束后，您已经成功的创建了一个CRA的文件夹，这个时候，进入文件夹，此时已经可以npm start开启了

默认的CRA在输入start后，开的端口在3000端口，且会自动在浏览器打开

暴露Webpack文件

在创建的CRA文件的README.md文件中，我们可以看到脚手架提供的默认脚本

实际上，我们也可以在package.json中的“srcipts”选项来看到写的脚本

npm run eject

我们不用傻傻的等他结束，因为一些奇怪的原因，，重新下载依赖包特别的慢，甚至可能没开始下载，我们可以删掉node_modules文件夹，然后重新下载依赖包，这里推荐用cnpm来下载

cnpm install

配置一下src文件夹目录结构

我们把默认初始化的css文件放在styles文件夹里，手动合并成一个init.css
把静态文件，logo.svg放在assets静态文件夹里

修改文件后，记得把App.jsx和main.js中引用修改一下哦

修改start.js

scripts文件夹中的starts.js 在47行处，我们可以看到这么一组代码，这两个const定义的内容是默认的端口号以及Host主机

在工作中，我们经常会访问别人给的接口，这个时候我们需要配置一下代理。我们可以在package.json中加proxy字段配代理，也可以选择src/setupProxy.js 编写跨域代理的代码，以及config/webpackDevServer.config.js中直接编写代理的代码

openBroswer（url.localUrlForBroswer）自动打开浏览器,建议注释掉，太费性能了

简单阅读源码我们可以发现，区分生产环境和开发环境，依赖于一个函数configFactory，再查一查，发现是从config/webpack.config中引入的。
我们可以看到，脚手架中，并没有使用webpack的--ENV来区分，而是使用nodejs的进程变量来区分的

入口文件名修改在 config/paths.js appIndexJs

appIndexJs: resolveModule(resolveApp, 'src/index'),

别名修改 config/webpack.config.js alias

'@': path.resolve(__dirname, '../src'),这里抛砖引玉，如果有其他别名想设置，也可以通过这个方式来修改

http-proxy-middleware中间件

用于把请求代理转发到其他服务器的中间件 npm install http-proxy-middleware -D

这个是新版本的写法，可放心食用，里面的选项只列举了常用的两个，如需要全部的选项还请翻阅源码哦。

配置loader

在webpack.config.js 文件中 module选项中配置loader

脚手架有一些默认的loader，可以自行翻阅，为了后面引入Ant Design组件库，这里加入less-loader 根据文档里的注释提示我们知道，添加的新loader需要放在file-loader之前，我们可以直接放在第一个位置即可，以下是loader配置代码

{
  test: /.less$/i,
  use: [
    isEnvDevelopment ? 'style-loader' : {
      loader: MiniCssExtractPlugin.loader,
      options: paths.publicUrlOrPath.startsWith('.')
        ? { publicPath: '../../' }
        : {},
    },
    "css-loader",
    "less-loader"
  ],
}

引入Ant Desgin组件库

cnpm i antd -S

babel.config.js配置

在项目根目录添加babel.config.js，配置Babel插件 babel是一个编译器，可以把我们写的ES6+的代码转化成为基础的，浏览器了解的ES5代码在脚手架中，已经安装了一些babel的plugin，我们再按需加入一些我们需要的plugin即可，这里推荐几个（按照文档操作，先下载！！！）

@babel/plugin-proposal-class-properties @babel/plugin-proposal-class-properties · Babel 中文文档 (docschina.org) @babel/plugin-proposal-decorators @babel/plugin-proposal-decorators · Babel 中文文档 (docschina.org) @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-dynamic-import · Babel 中文文档 (docschina.org)

    babel.config.js

    module.exports = {
  plugins: [
    ["@babel/plugin-syntax-dynamic-import"],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

小优化

我们可以用CDN导入需要的antd的css样式，对我们的项目做一个优化。解决css导入慢问题。
因为本地引入less要编译，引入css又太大，降低了打开速度
这里推荐个网站，大家可以自己寻找合适的cdn链接
jsDelivr - A free, fast, and reliable CDN for open source
把下面的代码贴入到public/index.html中即可

<link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/antd@4.18.5/dist/antd.min.css' />

Create-react-app的简单配置