webpack中 resolve.alias 配置，@import相關踩坑

1、在使用webpack打包項目時，可以在配置文件中配置resolve.alias來定義一些絕對路徑，方便在項目中靈活使用路徑，舉例如下：

resolve: {
         extensions: [‘.js‘, ‘.vue‘],
         alias: {
             ‘@‘: path.resolve(__dirname, ‘src‘),
             ‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),
            '@/common': path.join(process.cwd(), 'client/modules/common'),
         }
}    

2、配置之后，引用會發生如下變化：

// 相對路徑引入
import hongAlert from ‘./../src/scss/test.less‘；
@import ‘./../common/styles/test.less‘；

// 配置后改寫為絕對路徑引入
import hongAlert from ‘@less/test.scss‘；
@import '~@/common/styles/test.less';

注意：scss和less文件使用絕對路徑引入時，需要在引入路徑前面加上‘~’，不然會報錯，找不到對應路徑；

波浪號是為了防止css-loader把@ 解析為相對路徑