摘要
在react中,大多数业务逻辑都组件化;极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“…/…/components/test”的方式,组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码,废弃“…/…/”的组件引入方式,配置一个组件路径重写的方式引入组件。
配置内容
我在之前就介绍过在react中引入less的配置,同样的为了配置一个路径别名,使用customize-cra来覆写webpack底层配置。(配置覆写webpack需要的插件以及第三方库就不在复述,不清楚的可以去参考Ant Design官方的配置说明)
附上我的less配置原文地址:https://www.cnblogs.com/BlueBerryCode/p/11943111.html
路径别名重写方式一
const {
override } = require('customize-cra');
const path = require("path");
module.exports = override(
config =>{
config.resolve.alias = {
"@": path.resolve(__dirname, "src")
};
return config;
}