webpack路径的别名配置

如果还不知道webpack的同学，可以先自行去了一些webpack，传送门webpack详细入门整理

我们在使用模块化开发的时候都是使用import或者require去导入我们的模块，但是当我们项目较大，模块较多的时候，我们用相对路径导入是一件麻烦的事情。那有没有一种更简便的方法去匹配路径呢？这时我们可以使用webpack的别名配置功能。

1、在我们的webpack.config.js中：

配置配置我们resolve.alias

// 引入nodejs 的path模块，path.resolve用来处理绝对路径
const path = require('path') 
module.exports = {
    ...
    resolve:{
        alias:{
            '@':path.resolve(__dirname,'src/')
        }
    }
}

2、使用。

我这个index.css 在我的src/css下面

import '@/css/index.css'

到这里，相信大家都明白了吧，alisa的作用就是给我们起了一个别名，用@代替了我们的src/。
当然如果你愿意的话，还可以配置更多的别名。比如：

alias:{
      '@':path.resolve(__dirname,'src/')，
      '@co':path.resolve(__dirname,'src/components')
  }