【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}