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';





总结



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



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