關於 webpack external

標籤：universal   color   type   test   引用   pre   roo   amd   span   

引用UMD格式的包，

webpack.config.js 配置

externals: {
    "./test1": "A",
    "./test2": "B",
},

產生的UMD格式的js開頭都有這麼一段 

(function webpackUniversalModuleDefinition(root, factory) {
   if(typeof exports === ‘object‘ && typeof module === ‘object‘)
      module.exports = factory(require("A"), require("B"));
   else if(typeof define === ‘function‘ && define.amd)
      define(["A", "B"], factory);
   else {
      var a = typeof exports === ‘object‘ ? factory(require("A"), require("B")) : factory(root["A"], root["B"]);
      for(var i in a)   (typeof exports === ‘object‘ ? exports : root)[i] = a[i];
     
   }
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__) {

注意看紅色的兩段， 
this 指向是window對象

for(var i in a)   (typeof exports === ‘object‘ ? exports : root)[i] = a[i]; 這段就很好理解了  其實就把你require要引用的對象放到 window對象上 ，所有都對象都從window的屬性取

require("A"), require("B")  到最後其實就是 window.A,window.B  而不會 是 根據moduleId取對象內的module
-------------------------------
普通模式的index.js 產生的程式碼更直接了，直接取window內容相關的A,B屬性

**/ function(module, exports) {

   module.exports = A;

/***/ },
/* 2 */
/***/ function(module, exports) {

   module.exports = B;

/***/ }
/******/ ]);

關於 webpack external