webpack+vue学习笔记

路径中引用中的@符号是什么意思？

在看使用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
        }
    }
}

module.exports与exports，export与export default之间的关系和区别

注意，这是 CommonJS模块规范 和 ES6模块规范 的两种不同的概念。

- CommonJS模块规范

Node应用由模块组成，采用CommonJS模块规范。
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的> - exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
require方法用于加载模块。
指令有：exports 、module.exports
用法：

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

关于exports 与 module.exports

为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。
var exports = module.exports;
于是我们可以直接在 exports 对象上添加方法，表示对外输出的接口，如同在module.exports上添加一样。

exports:首先对于本身来讲是一个变量（对象），它不是module的引用，它是{}的引用，它指向module.exports的{}模块
module.exports:首先，module是一个变量，指向一块内存，exports是module中的一个属性，存储在内存中，然后exports属性指向{}模块
exports只能使用.语法向外暴露内部变量例：exports.xxx=xxx
module.exports既可以通过点语法，也可以直接赋值一个对象，例:
module.exports.xxx=xxx
module.exports=xxx

- ES6模块规范

不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。
需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
指令有：export 、export default
用法有：

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// export-default.js
export default function () {
  console.log('foo');
}

参考：