webpack模块机制浅析【一】

今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制。

下面这段代码是webpack打包后的最基本的形式,可以说是【骨架】

(function(root,fn){
if(typeof exports ==='object'&&typeof module === 'object'){
module.exports = fn();//exports和module同时存在,说明时在node的CommonJs规范下,这个时候使用module.exports来导出模块,fn函数执行后是返回一个模块
}else if(typeof define === 'function' && define.amd){
define([],fn);//当exports和module不同时存在时,先判断define和define.amd是否存在;如果存在表明在AMD规范下,所以就使用define函数"包裹"一下fn函数,以此来声明一个AMD规范下的模块
}else if(typeof exports === 'object'){
exports['packname'] = fn();//packname表示的包名,exports据说是module.exports的引用,但是我不明白module不存在何来exports,求网友解答,不清楚什么时候代码能够执行到这里?
}else {
root['packname'] = fn();//这个应该是如果上面的情况都不存在那就把它绑定在当前执行环境的"根节点",如在浏览器下就绑定在window上;
}
})(this,function(){//this丢进去变成了root,后面这个function丢进去就是fn
return (function(modules){//modules是参数丢进来的函数数组
var installed = {};//用来装载已声明模块
function _webpack_require_(moduleId){//webpack的包获取函数,使用这个函数去检索前面传进来的modules函数数组,从而解锁出每一个函数数组中的元素(也可以说是模块),每一个数组元素一般都是会存在闭包以隔离作用域,每一个元素中会使用module.exports来作为输出寄托对象。
if(installed[moduleId]){//moduleId其实就是modules数组的索引
return installed[moduleId].exports;//如果存在说明之前函数执行过
}
var module = installed[moduleId] = {//可以说是缓存模块
exports:{},//这个会使用下面的call函数来改变。
id:moduleId,
loaded:false
}
modules[moduleId].call(module.exports,module,module.exports,_webpack_require_)
//上面一句中,其实是执行modules[moduleId]()函数,只不过函数this指向了module.exports(也就是this)
//还是上面一句解释(因为重要啊):第二个参数module其实是一个【地址引用】,只要执行函数在函数中对这个module做了更改,那么最开始的module就做了更改,这也是为什么后面的函数数组中的函数都把方法和变量都绑定在module.exports上面的原因
module.loaded = true;//可以不管
return module.exports;//这个很重要,这个时候module.exports已经被上面的call函数装饰过了。在经过无数个函数的洗礼之后,这个module.exports会逐渐成长为包含各种变量和方法的【大对象】,反正就是个对象,最后return丢给外层的module.exports或者this或者丢给AMD的define可以。
}
_webpack_require_.m = modules;//这个先可以不管
_webpack_require_.c = installed;//缓存,先不管
_webpack_require_.p = '';//先不管
return _webpack_require_(0);//这个是函数执行的入口,相当于执行modules[0]函数,可以在modules的第一个函数中再去调用其他函数
})([//注意这是一个函数数组,里面都是函数,也可以理解为模块
function(module,exports,_webpack_require_){
// console.log('hi');
console.log(this);//如果在下没猜错的话,下面几个函数中的this输出都是{},也就是_webpack_require_一开始定义modules下的exports(初始化为{}),对吧?
module.exports = _webpack_require_(1);
},
function(module,exports,_webpack_require_){
console.log(this);//{}
let str = _webpack_require_(2);//调用其他模块
let isType = _webpack_require_(3);
module.exports = {age:18,str:str,isType:isType};
},
function(module,exports,_webpack_require_){
console.log(this);//{}
module.exports = '你好'
},
function(module,exports,_webpack_require_){
console.log(this);//{}
module.exports = function(type){
return function(obj){//返回一个函数
return Object.prototype.toString.call(obj) === "[object "+type+"]";//判断变量类型的黑科技
}
}
}
]);
}) /*********/
if(typeof module =='object' && typeof exports == 'object'){
console.log(module.exports);//{ age: 18, str: '你好', isType: [Function] }
var isArray = module.exports.isType("Array");//返回的是一个函数
console.log(isArray([1]));//true
console.log(isArray('1'));//false
console.log(isArray(1));//false
}else if(typeof define == 'function'){
console.log('AMD');
}else{
console.log(this);
var isArray = this.isType("Array");//返回的是一个函数
console.log(isArray([1]));//true
console.log(isArray('1'));//false
console.log(isArray(1));//false
}

理解这个对于理解别人源码会有帮助,如果你不懒,我觉得你应该会把这段代码执行一下(用node执行)

webpack模块机制浅析【一】的更多相关文章

  1. Linux模块机制浅析

    Linux模块机制浅析   Linux允许用户通过插入模块,实现干预内核的目的.一直以来,对linux的模块机制都不够清晰,因此本文对内核模块的加载机制进行简单地分析. 模块的Hello World! ...

  2. Linux模块机制浅析_转

    Linux模块机制浅析 转自:http://www.cnblogs.com/fanzhidongyzby/p/3730131.htmlLinux允许用户通过插入模块,实现干预内核的目的.一直以来,对l ...

  3. 【ARM-Linux开发】Linux模块机制浅析

    Linux模块机制浅析   Linux允许用户通过插入模块,实现干预内核的目的.一直以来,对linux的模块机制都不够清晰,因此本文对内核模块的加载机制进行简单地分析. 模块的Hello World! ...

  4. 【Linux开发】Linux模块机制浅析

    Linux允许用户通过插入模块,实现干预内核的目的.一直以来,对linux的模块机制都不够清晰,因此本文对内核模块的加载机制进行简单地分析. 模块的Hello World! 我们通过创建一个简单的模块 ...

  5. 【linux驱动笔记】linux模块机制浅析

      1.   模块module 操作系统分微内核和宏内核,微内核优点,可以使操作系统仅作很少的事,其它事情如网络处理等都作为应用程序来实现,微内核精简的同时,必然带来性能的下降.而linux的宏内核设 ...

  6. 探寻 webpack 插件机制

    webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...

  7. typecho流程原理和插件机制浅析(第一弹)

    typecho流程原理和插件机制浅析(第一弹) 兜兜 393 2014年03月28日 发布 推荐 5 推荐 收藏 24 收藏,3.5k 浏览 虽然新版本0.9在多次跳票后终于发布了,在漫长的等待里始终 ...

  8. Webpack编译结果浅析

    如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发. 你是否好奇你写的代码经过Webpack构建之后会生成什么东西?是否有时调试 ...

  9. Typescript学习笔记(五) 模块机制

    javascript从es5之前都缺少一种模块机制,无法通过js引入文件,于是requirejs等等的加载器应运而生.这些加载器的使用也并不统一,产生了amd,commonjs,umd等等的规范,各有 ...

随机推荐

  1. 鸟哥的linux私房菜学习-(五)补充:重点回顾

    为了避免瞬间断电造成的Linux系统危害,建议做为服务器的Linux主机应该加上不断电系统来持续提供稳定的电力: 默认的图形模式登陆中,可以选择语系以及作业阶段.作业阶段为多种窗口管理员软件所提供,如 ...

  2. java多线程(六)-线程的状态和常用的方法

    一个线程可以处于以下几种状态之一: (1) 新建(new):当线程被创建时,它只会短暂的处于这种状态,此时它已经获得了必须的系统资源,并执行了初始化,该线程已经有资格获取cpu时间了,之后它将转化为可 ...

  3. UWP 手绘视频创作工具技术分享系列 - 有 AI 的手绘视频

    AI(Artificial Intelligence)正在不断的改变着各个行业的形态和人们的生活方式,图像识别.语音识别.自然语言理解等 AI 技术正在自动驾驶.智能机器人.人脸识别.智能助理等领域中 ...

  4. JavaScript 内存相关知识

    一.内存基本概念 1.1.生命周期 不管什么程序语言,内存生命周期基本是一致的: 分配你所需要的内存 var n = 123; // 给数值变量分配内存 var s = "azerty&qu ...

  5. Center OS 7 安装 $$

    资料来自网络,收集整理做个备忘 1. 安装Python # yum install python-setuptools && easy_install pip 2. 安装$$ # pi ...

  6. Android 根据字符串动态获取资源ID

    1.常用方法public int getResId(String name,Context context){ Resources r = context.getResources(); int id ...

  7. vim 简单笔记

    vim编辑器Linux系统常用的一种编辑器  有三种模式   命令模式:插入模式:编辑模式 1 插入模式的基本操作: 从命令模式切入到插入模式只需要注意有三个字母aio就可以了  a是在当前光标后插入 ...

  8. dict-命令行下中英文翻译工具

    命令行下中英文翻译工具(Chinese and English translation tools in the command line) 安装(Install) ubuntu 安装 pip sud ...

  9. TLD算法原理--学习理解之(二)

    正如名字所示,TLD算法主要由三个模块构成:追踪器(tracker),检测器(detector)和机器学习(learning). 对于视频追踪来说,常用的方法有两种,一是使用追踪器根据物体在上一帧的位 ...

  10. iOS 使用矢量图

    iOS 使用矢量图 iOS 图标通常用 PNG 格式的图片.PNG 图片放大到超过自身的大小就会模糊.可以使用 PDF 格式的矢量图,优点是任意改变图片大小并且保持清晰度. 简单使用 与 PNG 格式 ...