zoukankan      html  css  js  c++  java
  • [webpack] Webpack 别名

    存在这样一种情况,有时候项目中,存在一些 公共的组件,通常会抽取出来,放在一个统一的文件夹中.
    然后大家就可以再 各个 模块里面 愉快的使用该 组件了.
     
    但是也带来一个坑爹的问题
    组件放在  common 文件夹中,但是 引用是在 modules 下的各个模块中引用.
    这个时候 引用的方式是这样的
    import xxx from ‘../../../common/components/Form’
    引用组件的文件路径不一样,那么引用的地址也是不一样的.  所以 ../../../这个不知道是有多少层,看着眼泪都掉下来.

    296172.png



    然后这么坑爹的问题,怎么会没有解决方案呢? 必须是要有的
    解决方案如下:
    root : 配置 require 或者 import 的基本路径
    然后配置 alias 别名.
    然后你就可以发现了惊喜.
    resolve: {
    //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
    extensions: ['', '.js', '.jsx'],
    root: [
    path.resolve(__dirname, './src')
    ],
    alias: {
    commonForm: "common/components/Form/index.js"
    }
    }
    就可以引用,没有必要在像以前那样  import xx from '../../../../../xxxx’
     
    webpack 对自己的模块起一个别名,这样引用的时候,直接  import xxx from ‘commonForm'
     
  • 相关阅读:
    趋势线突破有效的标志 武胜
    jira 试用license
    Jmeter使用指南
    linux c mysql 编程
    apache module 读取配置文件
    solr 中文分词 mmseg4j 使用例子 ,NGramTokenizerFactory
    使用CTabCtrl控件实现属性页功能
    linux 命令
    vc++2008 采用GSoap访问 WebService
    apr 编程demo出错。
  • 原文地址:https://www.cnblogs.com/zhongxia/p/5370532.html
Copyright © 2011-2022 走看看