vue ---- webpack扩展

实验

步骤1. 在src目录下创建js/test/info.js
步骤2. 在src目录下创建msg.js
步骤3. 在msg.js中添加如下

//向外导出一个对象
export default {
    msg: 'hello vue'
}

步骤4. 在info.js中添加如下

import msg from '../../msg';

console.log(msg);

步骤5. 在index.js中添加如下

import './js/test/info.js';

运行结果

问题所在
在info.js，以及index.js中导入的路径都是以当前文件所在目录由己向外进行文件查找，非常的不直观

解决方案
使用@符号 表示 src 源代码目录， 从外往里查找

import msg from '@/msg.js';

console.log(msg);

webpack.config.js下添加如下节点

    resolve: {
        alias: {
            '@': path.join(__dirname,'./src/')
        }
    }

注意： 这里的path 提前需要导入
const path = require('path') //导入node.js 中专门操作路径的模块