webpack打包文件中的@符号表示什么意思

Posted 2022-03-10 belongs-to-qinghua

　　在看使用webpack打包的项目代码时，经常会看到在路径中引用@符号

import  one from ‘@/views/one.vue‘

　　

　　那这里的@符号到底表示什么意思呢？

　　这其实利用了webpack的  resolve.alias  特性，webpabk.config.js  的配制代码如下，在webpack打包时，会把路径引用中的@符号，转换为相对应的路径。

const path = require("path");
function resolve(dir) 
    return path.join(__dirname, ‘..‘, dir);


module.exports = 
    resolve: 
        extensions: [‘*‘, ‘.js‘, ‘.vue‘],
        alias:
            ‘vue$‘: ‘vue/dist/vue.common.js‘,
            ‘@‘: resolve(‘src‘)　　// 通过这里的配置，@符号等同于src