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把@ 解析为相对路径

转载于:https://www.cnblogs.com/cassiel/p/10026872.html