[webpack] Webpack 别名

存在这样一种情况,有时候项目中,存在一些 公共的组件,通常会抽取出来,放在一个统一的文件夹中.

然后大家就可以再 各个 模块里面 愉快的使用该 组件了.

但是也带来一个坑爹的问题

组件放在  common 文件夹中,但是 引用是在 modules 下的各个模块中引用.

这个时候 引用的方式是这样的

import xxx from ‘../../../common/components/Form’

引用组件的文件路径不一样,那么引用的地址也是不一样的.  所以 ../../../这个不知道是有多少层,看着眼泪都掉下来.

---

然后这么坑爹的问题,怎么会没有解决方案呢? 必须是要有的

解决方案如下:

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'