React 知识汲取篇 —— react-app-rewired config-overrides.js配置

文章目录

react-app-rewired
按需加载 babel-plugin-import
安装less
配置路径名别名
- path.resolve和path.join的区别
整体的安装配置

react-app-rewired

在学习React的时候通过react脚手架create-react-app创建了项目，但是发现了一个问题如果没有执行eject命令的话是没有其他配置文件的这个时候就需要用到 customize-cra 和 react-app-rewired插件
然后在根目录下新建一个名称为config-overrides.js的文件。在里面去进行所有的配置

npm install react-app-rewired customize-cra --save-dev

react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置

然后修改package.json中启动的配置

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},

然后在目录中创建一个config-overrides.js修改默认的一些配置

module.exports =function override(config, env){return config;
};

按需加载 babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件
官网
https://github.com/ant-design/babel-plugin-import
安装

npm install babel-plugin-import --save-dev

//引入
const { injectBabelPlugin } =require('react-app-rewired');
//使用
module.exports =function override(config, env){config= injectBabelPlugin(['import', { libraryName:'antd', style:true}],config);return config;};

然后在组件中就可以直接进行引用

import { Button } from 'antd';

安装less

安装所需less依赖

npm install less-loader less --save-dev

安装react-app-rewire-less

npm install --save-dev react-app-rewire-less

config-overrides.js 修改配置

const rewireLess = require('react-app-rewire-less');config = rewireLess.withLoaderOptions({modifyVars: { "@primary-color": "#1DA57A" },javascriptEnabled: true
})(config, env);

这里也可以自定义支持自己的主题
可以参考一个大佬的文章
antd在线换肤定制功能

config = rewireLess.withLoaderOptions({modifyVars: getLessVars(path.join(__dirname, './src/styles/vars.less')),javascriptEnabled: true})(config, env);

配置路径名别名

const { override, addWebpackAlias} = require('customize-cra');
const path = require('path')module.exports = override(addWebpackAlias({assets: path.resolve(__dirname, './src/assets'),pages: path.resolve(__dirname, './src/pages')})
);

path.resolve和path.join的区别

一、path.join()方法

path.join()方法是将多个参数字符串合并成一个路径字符串

console.log(path.join(__dirname,‘a’,‘b’));
假如当前文件的路径是E:/node/1,那么拼接出来就是E:/node/1/a/b。

console.log(path.join(__dirname,’/a’,’/b’,’…’));
路径开头的/不会影响拼接，…代表上一级文件，拼接出来的结果是：E:/node/1/a
　　console.log(path.join(__dirname,‘a’,{},‘b’));
而且path.join()还会帮我们做路径字符串的校验，当字符串不合法时，会抛出错误：Path must be a string.
二、path.resolve()方法　　path.resolve()方法是以程序为根目录，作为起点，根据参数解析出一个绝对路径
　　以应用程序为根目录　　普通字符串代表子目录　　/代表绝对路径根目录
　　　　console.log(path.resolve()); 得到应用程序启动文件的目录（得到当前执行文件绝对路径） E:\zf\webpack\1\src 　　console.log(path.resolve(‘a’,’/c’)); E:/c
,因为/斜杠代表根目录，所以得到的就是E:/c 　　所以我们一般拼接的时候需要小心点使用/斜杠
　　console.log(path.resolve(__dirname,‘img/so’));
E:\zf\webpack\1\src\img\so 这个就是将文件路径拼接，并不管这个路径是否真实存在。
　　console.log(path.resolve(‘wwwroot’, ‘static_files/png/’,
‘…/gif/image.gif’))
E:\zf\webpack\1\src\wwwroot\static_files\gif\image.gif
　　这个是用当前应用程序启动文件绝对路径与后面的所有字符串拼接，因为最开始的字符串不是以/开头的。　　…也是代表上一级目录。

首先需要先引入

const path = require('path');

-------------------------------------------------------案例-------------------------------------------------------------------
转载于https://blog.csdn.net/qq_33745501/article/details/80270708
path.join()

const path = require('path');
let myPath = path.join(__dirname,'/img/so');
let myPath2 = path.join(__dirname,'./img/so');
let myPath3=path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');console.log(__dirname);
console.log(myPath);
console.log(myPath2);
console.log(myPath3);

path.resolve()

let myPath = path.resolve(__dirname,'/img/so');
let myPath2 = path.resolve(__dirname,'./img/so');
let myPath3=path.resolve('/foo/bar', './baz');
let myPath4=path.resolve('/foo/bar', '/tmp/file/');console.log(__dirname);
console.log(myPath);
console.log(myPath2);
console.log(myPath3);
console.log(myPath4);

其中__dirname就是当前文件的路径

整体的安装配置

yarn add @babel/plugin-proposal-decorators    //修饰器
yarn add codebandits/react-app-rewire-css-modules sass-loader node-sass    //css、sass模块化
yarn add babel-plugin-import   //antd按需加载
yarn add react-app-rewire-less-modules  //less模块化

const { injectBabelPlugin } = require('react-app-rewired');
const rewireCssModules = require('react-app-rewire-css-modules');
const rewireLess = require('react-app-rewire-less-modules')
const path = require('path')function resolve (dir) {return path.join(__dirname, '.', dir)
}module.exports = function override(config, env) {// do stuff with the webpack config...//启用ES7的修改器语法（babel 7）config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config)   //{ "legacy": true }一定不能掉，否则报错//css模块化config = rewireCssModules(config, env);//配置别名config.resolve.alias = {'@': resolve('src')}//antd按需加载config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], config,);//less模块化config = rewireLess.withLoaderOptions({javascriptEnabled: true,modifyVars: {'@primary-color': '#1DA57A'},})(config, env)return config;
};