webpack公共组件引用路径简化小技巧
日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件，供不同地方使用，但是随着项目不断变大，项目目录不断变深，我们引用公共组件的路径越来越长！
例如：引用一个公共模块
importMenufrom'../../../../../components/Menu';//这里路径太深，很容易写错
我们该怎么优化尼？
解决方案1：使用webpack的resolve.alias属性
先配置webpack
module.exports={
...
resolve:{
alias:{
"@commModule":path.resolve(__dirname,"src/components/")
}
}
...
};
引用Menu模块
importMenufrom'@commModule/Menu';
解决方案2：babel-plugin-module-resolver
配置.babelrc
{
"plugins":[
["module-resolver",{
"alias":{
"@commMdule":"./src/components"
}
}]
]
}
引用Menu模块
importMenufrom'@commModule/Menu';
总结
或许这只是一个小优化，但是在实际场景中，能够大大的降低我们的维护成本，提高我们的生产效率！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。