1. 不使用custom-cra的原因
custom-cra,react-app-rewired 与 craco 都是用来无 eject 重写 CRA 配置
custom-cra上次更新在两年前，有些配置跟不上新的版本，例如使用webpack5配置less会出错， 虽说目前有了解决方案引入新包customize-cra-less-loader，但是随着webpack5的广泛使用，越来越多的问题暴露了出来，因此在未来版本中寻找替代方案是非常有必要的
2. craco基本使用
安装依赖yarn add @craco/craco
修改 pacage.json 中的命令，将react-app-rewired改为craco
{
"scripts":{
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
}
在根目录创建 craco.config.js 配置文件
/* craco.config.js */
module.exports = {
webpack: {},
babel: {},
}
craco 更多配置
3. 使用craco修改antd主题
安装依赖 yarn add craco-less
/* craco.config.js */
const CracoLessPlugin = require('craco-less');
module.exports = {
webpack: {},
babel: {},
//配置craco提供的plugin
plugins: [
{ // 修改antd主题
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
math: 'always',
modifyVars: {
'@primary-color': '#1890ff', //主题颜色
},
javascriptEnabled: true,
},
},
},
},
],
}
4. 别名
在webpack.alias中配置别名
/* craco.config.js */
const path = require('path');
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, '../src'),
'@moduleIcon': path.resolve(__dirname, '../src/assets/images/moduleIcon'),
'@pages': path.resolve(__dirname, '../src/pages'),
},
},
babel: {},
plugins: [],
};
5. babel扩展
- lodash按需打包
新建addBabelPlugins.js
const addBabelPlugins = () => {
const configs = [
['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
];
return configs;
};
module.exports = addBabelPlugins;
在babel.plugins中配置babel扩展
/* craco.config.js */
const addBabelPlugins = require('./addBabelPlugins.js');
module.exports = {
webpack: {
alias: {},
},
babel: {
plugins: addBabelPlugins(),
},
plugins: [],
};
- 按环境引入扩展
修改addBabelPlugins.js
const addBabelPlugins = () => {
const configs = [
['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'lodash'],
];
if (process.env.NODE_ENV !== 'development') {
configs.push(['babel-plugin-transform-remove-console', { exclude: ['error', 'warn'] }]);
}
return configs;
};
module.exports = addBabelPlugins;
之所以使用函数的方式引入扩展，主要是为了方便在函数中进行环境的判断等操作，也可以使用craco自带的whenDev等函数进行环境判断，比如：
const { whenDev } = require("@craco/craco");
module.exports = {
webpack: {
//配置webpack的plugin
plugins: [
new ConfigWebpackPlugin(),
...whenDev(() => [new CircularDependencyPlugin()], [])
]
}
};
6. 分包
新建addSplitChunks.js
const addSplitChunks = () => {
if (process.env.NODE_ENV !== 'development') {
return {
chunks: 'all',
minSize: 30000,
name: false,
maxAsyncRequests: 5,
maxInitialRequests: 3,
cacheGroups: {
'echarts.vendor': {
name: 'echarts.vendor',
priority: 40,
test: /[\\/]node_modules[\\/](echarts|zrender)[\\/]/,
chunks: 'all',
},
'async-common': {
chunks: 'async',
minChunks: 2,
name: 'async-commons',
priority: 30,
},
commons: {
name: 'commons',
chunks: 'all',
minChunks: 2,
priority: 20,
},
},
};
}
return {};
};
module.exports = addSplitChunks;
修改craco.config.js
const addSplitChunks = require('./addSplitChunks.js');
module.exports = {
webpack: {
configure: (webpackConfig, { env }) => {
webpackConfig.optimization.splitChunks = addSplitChunks();
return webpackConfig;
},
},
};
在webpack.configure中可以配置任何webpack的配置
7. 配置代理
/* craco.config.js */
module.exports = {
devServer: {
port: 9000,
proxy: {
"/juhe": {
target: "http://v.juhe.cn",
changeOrigin: true,
secure: false,
pathRewrite: {
"^/juhe": "",
},
},
},
},
};
secure：默认情况下，将不接受在HTTPS上运行且证书无效的后端服务。如有需要将secure设为false
changeOrigin：默认情况下，代理时会保留主机头的来源，可以将changeOrigin设为true覆盖此行为
8. 最后
如果不清楚webpack5的配置，可参考我的另一篇文章webpack5详细教程（5.68.0版本）
以上就是react app rewrited替代品craco使用示例的详细内容，更多关于craco替代react app rewrited的资料请关注脚本之家其它相关文章！