首页 > 代码库 > webpack到底是怎么打包的，多入口，草稿
webpack到底是怎么打包的，多入口，草稿
webpack.config
module.exports={
entry:[‘entry1.js‘,‘entry2.js‘],
output:{
path:‘./dist‘,
filename:‘output.js‘
}
}
豪不意外，对于普通的多入口webpack.config文件，打包出来的文件和单入口文件一样，把两个文件作为自执行函数的参数放在数组传了进去，不过这两个文件的位置是1和2（最开始以为是0和1对吧），位置0的是webpack自己生成的一个函数。是长这个样子的。
* 0 */
function(module, exports, __webpack_require__) {
__webpack_require__(1);
module.exports = __webpack_require__(2);
},
这下就知道上一篇文章的疑惑了，为啥要在call方法里面传入__webpack_require__方法，这是为了多文件入口的时候调用。
这个编号为0的模块功能就是把所有入口的模块都运行一下，当然每次运行都__webpack_require__都会生成一个module保存在webpack内部。
所以这个运行完以后会有3个模块，同时0号模块也保存了2号模块的内容，为什么这么做我还不清楚。
其实最开始的时候我还在想，如果像上一篇那样编译文件，多入口文件是没办法都运行的，只能运行第一个模块，就是编号0的模块，这样一来，就解决了我的疑惑。
那么如果把两个入口编译到两个不同的文件，还会有这个自动生成的0号模块么？比如这样的config文件：
module.exports={
entry:{
a:‘./entry1.js‘,
b:‘./entry2.js‘},
output:{
path:‘./dist‘,
filename:‘[name].js‘
}
}
答案是不会，尽管生成了a.js和b.js。但是各自都是单模块文件，就是上一篇随笔写的那种格式。
那如果这样的config文件会生成什么样的文件？
module.exports={
entry:{
a:[‘./entry1.js‘,‘./entry3.js‘,],
b:[‘./entry2.js‘,‘./entry3.js‘,]},
output:{
path:‘./dist‘,
filename:‘[name].js‘
}
}
a模块依赖entry1和entry3;b模块依赖entry2和entry3
打包出来的a.js and b.js都有0号加载模块，就是自动生成那个模块，同时，也都有entry3.js里面的源代码，这就有点操蛋了，这意味着entry3.js里面的代码被编译了两次被加载了两次，如果这个代码是一个大的库，那就麻烦了。可是我觉得webpack不会这么水的，所以先不搭理，先按照自己的思路去探索。
我很想知道的是，如果在js文件中加载依赖会发生什么。这就试试。
entry2.js我export了一个字符串，然后我在entry1.js中require这个字符串:
var doing = ‘fuck‘
var how = ‘bitch‘;
var what = require(‘./entry2‘);
module.exports={
doing:doing,
how:how,
what:what
};
this.haha=‘aha‘
编译一下试试。
结果是这样的，
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
var doing = ‘fuck‘
var how = ‘bitch‘;
var what = __webpack_require__(2);
module.exports={
doing:doing,
how:how,
what:what
};
this.haha=‘aha‘
/***/ },
/* 2 */
/***/ function(module, exports) {
var name = ‘entry2‘;
module.exports=name;
/***/ }
我发现自己写的require(‘./entry2‘)变成了__webpack_require__(2)。同时，entry2这个模块也变成了2号模块被编译了进来。这么一来就很清楚了。
还有就是，能看出来webpack是以output的文件为单位的，每一个文件都是一个新模块，和其他文件互相不干扰。
webpack到底是怎么打包的，多入口，草稿