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 1 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" }, 1 2 3 4 5 6 然后在目录中创建一个config-overrides.js修改默认的一些配置
module.exports =function override(config, env){ return config; }; 1 2 3 按需加载 babel-plugin-import babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件 官网 github.com/ant-design/… 安装
npm install babel-plugin-import --save-dev 1 //引入 const { injectBabelPlugin } =require('react-app-rewired'); //使用 module.exports =function override(config, env){ config= injectBabelPlugin(['import', { libraryName:'antd', style:true}],config); return config; }; 1 2 3 4 5 6 7 8 然后在组件中就可以直接进行引用
import { Button } from 'antd'; 1 安装less 安装所需less依赖
npm install less-loader less --save-dev 1 安装react-app-rewire-less
npm install --save-dev react-app-rewire-less 1 config-overrides.js 修改配置
const rewireLess = require('react-app-rewire-less');
config = rewireLess.withLoaderOptions({ modifyVars: { "@primary-color": "#1DA57A" }, javascriptEnabled: true })(config, env); 1 2 3 4 5 6 这里也可以自定义支持自己的主题 可以参考一个大佬的文章 antd在线换肤定制功能
config = rewireLess.withLoaderOptions({ modifyVars: getLessVars(path.join(__dirname, './src/styles/vars.less')), javascriptEnabled: true })(config, env); 1 2 3 4 配置路径名别名 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') }) ); 1 2 3 4 5 6 7 8 9 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'); 1 -------------------------------------------------------案例------------------------------------------------------------------- 转载于blog.csdn.net/qq_33745501… 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);
1
2
3
4
5
6
7
8
9
10
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);
1
2
3
4
5
6
7
8
9
10
其中__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模块化 1 2 3 4 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;
};
