关于 webpack external

Posted 2020-08-25

引用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;

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