CFXIXI工作室首页
CF西西的博客 | webpack设置别名

webpack设置别名

2. 一月 2017

转自:http://www.cnblogs.com/zhongxia/p/5370532.html

存在这样一种情况,有时候项目中,存在一些 公共的组件,通常会抽取出来,放在一个统一的文件夹中.
然后大家就可以再 各个 模块里面 愉快的使用该 组件了.
 
但是也带来一个坑爹的问题
组件放在  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'

Html5 APP