webpack中的export和export default、module exports的三者的区别

1.module.exports

module变量代表当前模块。这个变量是一个对象，module对象会创建一个叫exports的属性，这个属性的默认值是一个空的对象：

module.exports = {};

例子：app.js

module.exports.Name="我是电脑"；

module.exports.Say=function(){

  console.log("我可以干任何事情")；  

}

​

//上边这段代码就相当于一个对象

{

  "Name":" 我是电脑"，

  "Say" (){

       console.log("我可以干任何事情")；  

   }

}

2.export与module.exports的关系

Node为每个模块提供一个exports变量，指向module.exports。可以通俗的理解为：

//两者是相等关系，但又不是绝对相等关系

1.module.exports可以直接导出一个匿名函数或者一个值

module.exports=function(){

  var a="Hello World"  

  return   a;

}

但是exports是不可以的，因为这样等于切断了exports与module.exports的联系。

exports=function(){           //这样写法是错误的

  var a="Hello World"        //这样写法是错误的

  return   a;                //这样写法是错误的

}                            //这样写法是错误的

3.export和export default的区别

export是es6引出的语法，用于导出模块中的变量，对象，函数，类。对应的导入关键字是import。

二者的区别有以下几点：

export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。

export default的对象、变量、函数、类，可以没有名字。export的必须有名字。

export default对应的import和export有所区别

例子：

1.export写法

//./aap.js

var name="我是电脑"；

var say=function(){

console.log("我可以干很多事")；

}

​

export {name，say}；

​

//也可以直接一个一个的export但是必须得有名字

export const a=1；

export function data(){

　　return data;

}

​

​

//其他页面引入时必须这样

import {name，say} from "./app.js"

​

2.export default

//app.js

//可以没有函数名字

export default function(){

　　return data;

}

//这里export不能这样导出

export default const a=12；

//应该这样导出

const a=12；

export default a

​

//其他页面引入时必须这样

import data from "./app.js"

总结：

export default，import语句不需要使用大括号；

用export，对应的import语句需要使用大括号，一个模块只能有一个默认输出，所以export default只能使用一次。