webpack公共组件引用路径简化小技巧

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 '@chttp://ommModule/Menu';

解决方案2：babel-plugin-module-resolver

配置.babelrc

{

mrQArA"plugins": [

["module-resolver", {

"alias": {

"@commMdule": "./src/components"

}

}]

]

}

引用Menu模块

import Menu from '@commModule/Menu';

总结

或许这只是一个小优化，但是在实际场景中，能够大大的降低我们的维护成本，提高我们的生产效率！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。