项目要求用less 和 antd 按需加载：
安装node 、 git（登录注册码云先） 、 yarn
npx create-react-app xxxxxx (安装node的前提下)
git init --> git add . --> git commit -m "Saving before eject" (安装git 且 登录了，有前程仓库的前提下)
yarn eject (安装yarn的前提下)
yarn add less less-loader antd babel-plugin-import react-router-dom axios
yarn add jsonp --save
yarn add redux react-redux redux-devtools-extension --save
yarn add moment --save (选择性安装)
yarn add echarts echarts-for-react --save (选择性安装)
yarn add react-draft-wysiwyg draftjs-to-html --save (选择性安装)yarn start 报错 --> npm install babel-plugin-syntax-jsx --save-dev --> npm run dev --> 报错 --> npm install semver (报错什么百度什么，缺什么npm install 什么，或者yarn add 什么) 最后 yarn start
index.js 文件 渲染 <Router/> （import Router from './router';）
src文件夹里创建 router.js （import { HashRouter,Switch,Redirect,Link,Route } from 'react-router-dom';import App from './App';import 各种页面）（用HashRouter包着App,App包着Switch,Switch包着Route,除了登录页和其他单页面，主页另加Route并且 render Admin）；src里创建admin.js (用于布局结构)
App.js 渲染格式改成 export default class App extends React.Component 且 渲染动态子组件 return <div> { this.props.children } </div>
9.配置package.json 的less 和 按需加载 ：
（1）在index.js 中 import 'antd/dist/antd.less'，admin.js 中 import { Row,Col,Button } from 'antd';
（2）对less-loader 进行降级 yarn remove less-loader --》 yarn add less-loader@5.0.0
（3）配置package.json的babel增加 :
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
},
（4）配置eject后自动生成的config文件夹里webpack.config.js：
第一处：
{
test: /.less$/,
use:[
{loader: "style-loader"},
{loader: "css-loader"},
{
loader: "less-loader",
options: {
sourceMap:true,
modifyVars:{
'@primary-color':'#1890ff',
},
javascriptEnabled:true,
},
}
],
},（放在sass的后面 {
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},）
第二处：
//配置less style设置成true!!!!!!
["import", {
"libraryName": "antd",
"style": true //
style: true 会加载 less 文件}],（放在require.resolve('babel-plugin-named-asset-import')的后面 [
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],）
图片展示配置修改：
然后重新yarn start
---------------------以下作为后台管理开发------------------------
