create-react-app 4.0.1创建项目 自定义配置文件 支持使用less

文章参考

1. https://blog.csdn.net/hbiao68/article/details/101215029
2. create-react-app 官方git
3. https://hbiao68.blog.csdn.net/article/details/106361516
4. 官网给出的proxy配置方案

问题描述

本人近期新开发GY一个工作日志项目，升级create-react-app至4.0.1版本新建react项目后，发现项目中没了config-overrides.js文件，不可以直接在此文件书写覆盖配置。

 

新建项目

1. 本地全局安装create-react-app
2. 使用脚手架创建项目

yarn create react-app  #项目名#

    注：此时我电脑yarn版本为1.22.5，npm版本为6.14.8，使用官网上npm init creat-app #项目名#创建出的项目并不能直接运行，所以改用yarn命令创建

 

暴露配置文件

1. 在工程中执行 npm run eject
2. 删除node_modules文件夹的内容
3. 重新安装依赖，执行npm install

运行npm run eject命令后

支持使用less

1. 在工程中执行npm install less-loader less --save-dev
2. 在webpack.config.js文件中增加如下配置：

// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;


/**module下rules数组中增加如下代码段 ==> */


// Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    )
}

 

修改端口号

 

设置路径别名

 

关闭eslint

 

请求转发---此处深坑

起本地服务按照create-react-app的官方文档配置并没有生效，之后又尝试了下应按下操作

1. npm install http-proxy-middleware --save-dev
2. 在src目录下新建文件setupProxy.js，文件内容如下图（重点：一定要加”changeOrigin: true“）
3. npm run start

 

指定打包入口

若是在一个工程里包含多个小项目，则可以在src下分开建立文件夹，然后在运行npm run start或者npm run build命令之前修改paths.js里的配置即可指定打包项目

下图则是指定打包项目为WorkJournal

 

使用BrowserRouter路由方式且实现懒加载

使用BrowserRouter路由方式时地址栏不会出现#符

1. 在入口文件src/WorkJournal/index.js中定义：

import React from 'react';
import reportWebVitals from './../reportWebVitals';
import ReactDom from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import 'antd-mobile/dist/antd-mobile.css';
import RouterSet from './router/index';
ReactDom.render(
   /** 此处basename是你发到应用服务器的文件名，如nignx服务器 */
  <Router basename='/work-journal'>
    <RouterSet />
  </Router>,
    document.getElementById('root')
);

document.title = "项目标题";

reportWebVitals();

   2.在src/WorkJournal/router/index.js中定义：

import React,{Suspense } from 'react';
import { Route,Switch,Redirect} from 'react-router-dom';

//首页
const Home = React.lazy(()=>import('./../home/index'));
//登录
const Login = React.lazy(()=>import('./../login/index'));

/** 此处注意一定要加上Suspense这个标签否则会报错 **/
function App() {
  return (
    <div className="App" >
	<Suspense fallback={<div>Loading...</div>}>
		<Switch>
			<Route exact path='/' component={Home}/>
			{/** 首页-home */}
			<Route path='/home' component={Home}/>
			{/** 首页-login */}
			<Route path='/login' component={Login}/>
			<Redirect to='/' />
		</Switch>
	</Suspense>
    </div>
  );
}

export default App;