首页 > 代码库 > 关于 webpack external

关于 webpack external

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