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    ..代表上级目录

这回应该都清楚了吧。

标签 Alias, bp, Webpack