欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-11 21:23:27
日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件,供不同地方使用,但是随着项目不断变大,项目目录不断变深,我们引用公共组件的路径越来越长! 例如:引用...

日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件,供不同地方使用,但是随着项目不断变大,项目目录不断变深,我们引用公共组件的路径越来越长!

例如:引用一个公共模块

import menu from '../../../../../components/menu'; // 这里路径太深,很容易写错

我们该怎么优化尼?

解决方案1:使用webpack的属性

先配置webpack

module.exports = {
  ...
  resolve: {
    alias: {
      "@commmodule": path.resolve(__dirname, "src/components/")
    }
  }
  ...
};

引用menu模块

import menu from '@commmodule/menu';

解决方案2:

配置.babelrc

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@commmdule": "./src/components"
      }
    }]
  ]
}

引用menu模块

import menu from '@commmodule/menu';

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。