webpack这个打包工具,现在可以说很火,前一段时间为了优化公司项目,搞了一个月的gulp,说实在的,gulp的功能我感觉很强大了,而且用起来很灵活,最关键是简单,需要什么的时候直接弄个gulp任务,但是,使用场景很少了,由于之前的项目是php的,现在一般都用vue,react等,都已经集成了webpack,虽然说不用太多配置,但是需要配置的时候还是有的,所以,webpack研究一下也是有必要的,今天,复杂的先不说,只说说bundle.js这个文件里的代码都是干吗用的。
webpack打包bundle.js文件代码分析
一个入口,一个文件
首先,webpack.config.js配置文件是这样滴:
1 | module.exports = { |
index.js内容是这样滴:
1 | console.log('index'); |
最后再看看打完包后的bundle.js内容
1 | // bundle.js |
我们来分析一下bundle.js这个文件
- 1.整个内容是一个自执行函数,自执行函数传的参数是一个数组,数组里的元素是function函数,这个函数体的内容就是index.js文件的内容。
- 2.在这个闭包函数中,__webpack_require_是模块加载函数,接收模块id(对,webpack中每个模块都会有一个独一无二的id,其实也就是在IIFE传参数组中的索引值(0,1,2…..)。
- 3.真正执行module index里面语句的是个调用
1
2// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
我们再来看一个例子
一个入口,两个文件,A依赖B
先贴出文件内容:
1 | // a.js |
1 | // b.js |
1 | // bundle.js |
我们再来分析一下上面的代码。
- 1.由于有两个文件,所以IIFE得参数为长度是2的数组,并按照require的顺序排列。
- 2.IIFE函数体部分是一模一样的,也就是说再复杂的,多个依赖的文件,函数体部分也不变滴。
3.module a发生了变化,因为a依赖b,所以在a中调用webpack加载模块的函数
1
2// 1是模块b的id
var b = __webpack_require__(1);4.我们再来分析一下modules[moduleId].call(module.exports, module, module.exports, webpack_require);
使用call是因为为了确保每个module中的this指向的是module本身。然后给它传__webpack_require函数是想让module有加载其他module的能力。其它情况
其它的情况,比如多入口,多出口情况这里就不做过多分析,我也没搞明白,接下来准备手写一个简单的仿webpack打包工具。