【webpack】- 3、es6 和 commonJs `互操作` 时webpack是如何处理

由于webpack同时支持CommonJS和ES6 module模块化标准，因此需要理解es6 和 commonJs互操作时webpack是如何处理的

1、同模块化标准

如果导出和导入使用的是同一种模块化标准，打包后的效果和之前学习的模块化没有任何差异

• commonjs 模块化标准 导入导出
  
  注：exports.a =1 ; exports.b=2; 这种写法和module.exports={a:1,b:2}是一样的，最后也是转为后者这种形式

---

• es6 模块化标准 导入导出
  
  注：import c from ‘./a’； 导入的是默认导出的内容

2、不同模块化标准

不同的模块化标准，webpack按照如下的方式处理

• es6导出，commonjs导入
  
  export var a =1;是基本导出 ； export default 3;是默认导出

---

• commonjs导出，es6导入
  无论es6导入全部 方式，还是导入默认方式，得到的都是一样的(全部)
  

为了更直观，我们来看下对比图：

尽快webpack可以处理es6 和commonjs 模块化的互操作，但还是建议选择一个合适的模块化标准，然后贯彻整个开发阶段。

3、例子：jquery 两种模块化标准导入

jquery 是commonjs 模块化标准导出的；

var $ = require('jquery');
import $ from 'jquery';
import *as $ from 'jquery’;

commonjs 模块化标准导出 ，两种导入方式，得到的结果是一样的

注意： 需要注意的是es6如下的导出方式

//es6如下的导出
export default {
	a:1,
	b:2
}

//commonjs 导入时要注意
var obj = require('./es6');

这是obj = {default:{a:1,b:2}} 也就是 obj.default = {a:1,b:2}