webpack常用配置（Webpack配置alias）

alias的配置

通常我们的项目结构如下所示

src

api ...

assets ...

components ...

store ...

utils ...

然后每次需要引入某文件的时候都得 src/api ... 或 src/components ...  等

这无疑是非常麻烦的 
  
  
  
  
  
 ，于是就可以配置别名 
  
  
  
  
  
 ，来避免我们书写的麻烦

向前看

 


 


 


 


 


 
，就不举vue-cli3.0之前版本是在哪个文件配置的了 
 
 
 
 
 
，直接以vue-cli3.0为例

在vue.config.js上做如下配置

//vue.config.js //引入node的path模块 const path = require(path) //__dirname 当前模块的目录名 //path.join() 方法会将所有给定的 path 片段连接到一起（使用平台特定的分隔符作为定界符） 
   
   
   
   
   
  ，然后规范化生成的路径 
  
  
  
  
  
 。 const resolve = dir => path.join(__dirname, dir) //如果path模块仅在此次用到
 

 

 

 

 

 
，也可写成如下代码（不推荐） const resolve = dir => require(path).join(__dirname, dir) module.exports = {    configureWebpack:{        resolve: {            alias:{                @: resolve(src),                @api: resolve(src/api),                @components: resolve(src/components),                @assets: resolve(src/assets),                @store: resolve(src/store),                @utils: resolve(src/utils),           }       }   } }

有时候配置文件还可以这样配置

configureWebpack: config => { Object.assign(config,{ resolve: {                alias:{                    @: resolve(src),                    @api: resolve(src/api),                    @components: resolve(src/components),                    @assets: resolve(src/assets),                    @store: resolve(src/store),                    @utils: resolve(src/utils),               }           } })   }

config就是指向configureWebpack
 

 

 

 

 

 
，所以只要确保 configureWebpack.resolve.alias或者

chainWebpack..resolve.alias有配置到即可 
  
  
  
  
  
 。方式可以多种多样            ，比如

chainWebpack: config => {      config.resolve.alias       .set(@,resolve(src),       .set(@api: resolve(src/api)       .set(@components,resolve(src/components)       .set(@assets,resolve(src/assets)       .set(@store,resolve(src/store)       .set(@utils,resolve(src/utils)     }   }

chainWebpack为链式配置

配置完之后就可以如下方式引用文件

import XXX from @api/... import XXX from @components/... import XXX from @utils/...

当然肯定有人也会发现 

 
 

 
 

 
 

 
 

 
 

 
，有的项目配置别名是采用 path.resolve(),配置如下

//vue.config.js //引入node的path模块 const path = require(path) //__dirname 当前模块的目录名 //path.resolve() 方法会将路径或路径片段的序列解析为绝对路径

 


 


 


 


 


 
。 const resolve = dir => path.resolve(__dirname, dir) //如果path模块仅在此次用到











，也可写成如下代码（不推荐） const resolve = dir => require(path).resolve(__dirname, dir) module.exports = {    configureWebpack:{        resolve: {            alias:{                @: resolve(src),                @api: resolve(src/api),                @components: resolve(src/components),                @assets: resolve(src/assets),                @store: resolve(src/store),                @utils: resolve(src/utils),           }       }   } }

咋一看怎么完全一样？

其实不然                  ，接下来讲讲 path.join() 和 path.resolve() 的区别

path.join() 和 path.resolve() 的区别

新建个path.js文件

文件内容如下

const path = require(path) console.log("__dirname   //" + __dirname) console.log("path.resolve()   //" + path.resolve()) console.log("path.resolve(__dirname)   //" + path.resolve(__dirname)) console.log("path.resolve(__dirname,src)   //" + path.resolve(__dirname,src)) console.log("path.resolve(__dirname,/src)   //" + path.resolve(__dirname,/src)) console.log("path.resolve(__dirname,src/ab)   //" + path.resolve(__dirname,src/ab)) console.log("path.resolve(__dirname,/src/ab)   //" + path.resolve(__dirname,/src/ab)) console.log("path.resolve(__dirname,/src/ab,..)   //" + path.resolve(__dirname,src/ab,..)) console.log("path.resolve(__dirname,/src/ab,..)   //" + path.resolve(__dirname,/src/ab,..)) console.log("path.resolve(__dirname,/src/ab,..,c)   //" + path.resolve(__dirname,/src/ab,..,c)) console.log("path.join()   //" + path.join()) console.log("path.join(__dirname)   //" + path.join(__dirname)) console.log("path.join(__dirname,src)   //" + path.join(__dirname,src)) console.log("path.join(__dirname,/src)   //" + path.join(__dirname,/src)) console.log("path.join(__dirname,src/ab)   //" + path.join(__dirname,src/ab)) console.log("path.join(__dirname,/src/ab) //" + path.join(__dirname,/src/ab)) console.log("path.join(__dirname,src/ab,..)   //" + path.join(__dirname,src/ab,..)) console.log("path.join(__dirname,/src/ab,..) //" + path.join(__dirname,/src/ab,..)) console.log("path.join(__dirname,/src/ab,..,c) //" + path.join(__dirname,/src/ab,..,c))

使用node执行该命令 
 
 
 
 
 
 
 
 
 
 
 
，打印结果如下

__dirname   //D:\a\b\node path.resolve()   //D:\a\b\node path.resolve(__dirname)   //D:\a\b\node path.resolve(__dirname,src)   //D:\a\b\node\src path.resolve(__dirname,/src)   //D:\src path.resolve(__dirname,src/ab)   //D:\a\b\node\src\ab path.resolve(__dirname,/src/ab)   //D:\src\ab path.resolve(__dirname,/src/ab,..)   //D:\a\b\node\src path.resolve(__dirname,/src/ab,..)   //D:\src path.resolve(__dirname,/src/ab,..,c)   //D:\src\c path.join()   //. path.join(__dirname)   //D:\a\b\node path.join(__dirname,src)   //D:\a\b\node\src path.join(__dirname,/src)   //D:\a\b\node\src path.join(__dirname,src/ab)   //D:\a\b\node\src\ab path.join(__dirname,/src/ab) //D:\a\b\node\src\ab path.join(__dirname,src/ab,..)   //D:\a\b\node\src path.join(__dirname,/src/ab,..) //D:\a\b\node\src path.join(__dirname,/src/ab,..,c) //D:\a\b\node\src\c

path.resolve()方法

path.resolve()方法是以程序为根目录

















，作为起点            ，根据参数解析出一个绝对路径

以应用程序为根目录

普通字符串代表子目录

/代表绝对路径根目录

..代表上级

path.resolve(__dirname,/src)   //D:\src   /指向跟目录 path.resolve(__dirname,/src/ab,..,c)   //D:\src\c   ..代表上级目录

path.join()方法

path.join()方法是将多个参数字符串合并成一个路径字符串 path.join(__dirname,/src)   //D:\a\b\node\src   /不影响拼接 path.join(__dirname,/src/ab,..,c)  //D:\a\b\node\src\c    ..代表上级目录

这回应该都清楚了吧 
 
 
 
 
 
。