webpack公共组件引用路径简化小技巧
更新时间：2018年06月15日 09:18:14 作者：Nine
日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件.这篇文章主要介绍了webpack公共组件引用路径简化小技巧,非常具有实用价值，需要的朋友可以参考下
日常开发中，我们会常常把一些功能提取出来，包装成一个公共模块或者组件，供不同地方使用，但是随着项目不断变大，项目目录不断变深，我们引用公共组件的路径越来越长！
例如：引用一个公共模块
import Menu from '../../../../../components/Menu'; // 这里路径太深，很容易写错
我们该怎么优化尼？
解决方案1：使用webpack的resolve.alias属性
先配置webpack
module.exports = {
...
resolve: {
alias: {
"@commModule": path.resolve(__dirname, "src/components/")
}
}
...
};
引用Menu模块
import Menu from '@commModule/Menu';
解决方案2：babel-plugin-module-resolver
配置.babelrc
{
"plugins": [
["module-resolver", {
"alias": {
"@commMdule": "./src/components"
}
}]
]
}
引用Menu模块
import Menu from '@commModule/Menu';
总结
或许这只是一个小优化，但是在实际场景中，能够大大的降低我们的维护成本，提高我们的生产效率！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】
这篇文章主要介绍了js/jquery遍历对象和数组的方法,结合实例形式分析了数组遍历的forEach，map与each方法常见使用技巧,需要的朋友可以参考下2019-02-02
uni-app应用配置manifest.json最全最详细配置
这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是UniApp开发中用来配置应用信息的重要文件,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了JavaScript中使用数组方法汇总的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了根据当前时间不同在jsp页面上显示上午或下午,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JavaScript中的继承方式详解,本文讲解了js继承的概念、原型式继承与类式继承、原型链继承、类式继承、组合继承、原型式继承等内容,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了移动端手指放大缩小插件与js源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
这篇文章主要介绍了javascript中数组（Array)对象和字符串（String)对象的常用方法,结合实例形式总结分析了javascript中关于数组和字符串的常用函数与使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了PHPExcel中的一些常用方法汇总,本文直接给出操作代码实例,代码中对常用方法给出了注释,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了使用js获取url中的参数并返回一个对象方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
JavaScript 题型问答有答案参考，都是一些开发中容易碰到的问题。2010-02-02
最新评论