react项目之前只是在已搭建好的框架内去开发实现项目，没有自己动手搭建过，亲自动手实际操作，还遇到挺多问题的。
1.先安装node。
react 项目基于node环境，利用node -v查看node版本号
node -v
2.安装webpack
npm install webpack webpack-cli -g 完成全局安装，webpack -v 查询当前的版本号；
npm install webpack webpack-cli -g
3. 项目搭建
安装第三方脚手架工具create-react-app，使用其快速搭建项目并运行 npm install -g create-react-app 全局安装，npx create-react-app <project_name>创建项目；
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── logo.svg
└── yarn.lock
4. 修改webpack配置
react隐藏了配置文件 ，
- npm run eject可以暴露配置文件，操作不可逆，请谨慎使用
2.与package.json平级创建config-overrides.js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
const path = require("path");
//在不eject的情况下，覆盖webpack的配置
module.exports = override(
//写了下面这个部分，就实现了按需加载，再也不需要再每个页面里面都引入“antd/dist/antd.css”啦
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true //这里一定要写true，css和less都不行哦
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
//下面这行很特殊，这里是更改主题的关键，这里我只更改了主色，当然还可以更改其他的，下面会详细写出。
modifyVars: { '@primary-color': '#bae7ff' },
},
}),
config =>{
config.resolve.alias = {
"@": path.resolve(__dirname, "src")
};
return config;
},
)
