webpack公共组件引用路径简化小技巧
2018-06-15 09:18
736 查看
日常开发中,我们会常常把一些功能提取出来,包装成一个公共模块或者组件,供不同地方使用,但是随着项目不断变大,项目目录不断变深,我们引用公共组件的路径越来越长!
例如:引用一个公共模块
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';
总结
或许这只是一个小优化,但是在实际场景中,能够大大的降低我们的维护成本,提高我们的生产效率!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用webpack打包的后,公共请求路径的配置问题
- 配置 Webpack resolve alias 简化相对路径 import
- webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
- webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
- 详解webpack 多页面/入口支持&公共组件单独打包
- 使用webpack打包的后,公共请求路径的配置问题
- 使用webpack打包的后,公共请求路径的配置问题
- antd mobile(八) webpack通过别名取代路径引用
- webpack 多页面支持 & 公共组件单独打包
- webpack+vue中使用别名路径引用静态图片地址
- webpack引用动态资源路径错误的解决方案
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
- javaWeb引用图片路径问题
- vue项目优化之按需加载组件-使用webpack require.ensure
- 关于webpack打包图片的路径问题
- Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码
- webpack教程(六)——分离组件代码
- 详解windows下vue-cli及webpack 构建网站(三)使用组件
- 小技巧,Servlet3.x 应用无 web.xml 指定欢迎页引出的路径消除
- 浅谈webpack模块引用的五种方法