注:本文重点不是如何设置webpack.config.js
并完成响应的功用,而是经由过程对照webpack编译前和编译后文件,探讨webpack打包后的文件是如何加载实行的。
本文议论commonJS
模块化计划时,webpack
的打包事情。
为了便于议论,我们预备了一个异常简朴的例子,触及三个文件,分别是
文件a.js
module.exports ={
say:function(){
console.log('A is saying.');
}
}
文件b.js
module.exports ={
say:function(){
console.log('B is saying.');
}
}
文件index.js
var a = require('./a');
var b = require('./b');
a.say();
b.say();
依靠关联异常简朴,即index.js
文件依靠a.js
和b.js
两个文件。而且是采纳commonJS体式格局来援用的。
我的config
文件也贴一下。
var htmlPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
index:'./src/index.js'
},
output:{
path:'builds',
filename:'[name].js',
chunkFilename:'chunk.[name].js'
},
plugins:[
new htmlPlugin({
filename:__dirname+'/builds/index.html',
template:'./index.html'
})
],
devServer:{
contentBase:'./builds',
inline:true
}
}
另有一个异常简朴的index.html
文件。
<!DOCTYPE html>
<html>
<head>
<title>commonJS测试</title>
</head>
<body>
</body>
</html>
别的,本问的示例代码已放到Github
上,请 点击这里检察。
我们在目次下运转一下webpack
敕令,builds文件夹里的文件,就是被webpack处理过的文件,也是我们要议论的重点。
我们来看看文件目次:
builds
里,是编译后的文件,src里,是我们的原始文件。
那末a.js
和b.js
呢?打包进builds/index.js
文件内里了。打包实在就是干这个的,把多个文件合并到一个或少数几个文件里。
我们点开builds/index.js
,发明我们的代码被改的面目一新。人人点击这里看完全的代码,下面是部份片断。
(function(modules){
var installedModules = {};
function __webpack_require__(moduleId) {/*省略*/}
/*省略*/
return __webpack_require__(0);
})([
//这部份是index.js
function(module, exports, __webpack_require__){
var a = __webpack_require__(1);
var b = __webpack_require__(2);
a.say();
b.say();
},
//这部份是a.js
function(module, exports){
module.exports ={
say:function(){
console.log('A is saying.');
}
}
},
//这部份是b.js
function(module, exports){
module.exports ={
say:function(){
console.log('B is saying.');
}
}
}
])
在上面代码中,我们的index.js
、a.js
和b.js
被放进了一个数组中。进口文件(index.js
)都是在数组的0
的位置。进口文件的依靠(a.js
和b.js
),会依据依靠的状况往后排。
这个数组作为IIFE中函数的参数modules
传入function
中。注重匿名函数中的return __webpack_require__(0);
,这句挪用将实行数组中的第一个函数。
第一个函数:
function(module, exports, __webpack_require__) {
var a = __webpack_require__(1);
var b = __webpack_require__(2);
a.say();
b.say();
}
__webpack_require__(1)也就是实行数组中的第二个函数。
第二个函数:
function(module, exports) {
module.exports ={
say:function(){
console.log('A is saying.');
}
}
}
第二个函数的实行后的效果,就是把module.exports
中的内容赋给了变量a
。到这里,人人对代码的构造有了相识,然则症结的__webpack_require__
要领是如何事情的呢?我们来剖析下代码:
function __webpack_require__(moduleId) {
// Check if module is in cache
if(installedModules[moduleId])
return installedModules[moduleId].exports;
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.loaded = true;
// Return the exports of the module
return module.exports;
}
这里注重modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)
这行代码。个中的modules
就是我们适才讲的数组(modules
不是module
)。module.exports
是模块的上下文,也就是this
。所以,假如我们在index.js
里加一句this.name='jack'
,那末终究这个等价于module.exports.name='jack'
;
另外,我们还能够访问到module.id
这个属性。这并没有什么现实的作用,只是能够加深我们的明白。比方,我在a.js
中:
module.exports ={
say:function(){
console.log('A is saying.');
console.log(module.id);
}
}
是能够输出该模块的id
的。多说一句,假如你用webpack-dev-server
,它会打包进去其他的文件,这个id
会变的比较大(我测试的是75)。有一个可能会用到的module.loaded
属性。我们的模块在第一次实行的时刻,module.loaded
照样false
,实行事后才被设置为true
。
比方下面的代码:
index.js
if (module.loaded) {
var a = require('./a');
a.say();
} else {
var b = require('./b');
b.say();
}
在我们的例子中,这个是每次实行的效果都是B is saying.
由于每次实行index.js
模块中的代码都是第一次实行。
在现实的开辟中,有可能有要推断当前代码是否是第一次实行的需求。
另有一个主要的变量installedModules
。我们加载过的模块中的module.exports
对象,会保存在installedModules[moduleId]中。如许下次挪用,就能够直接返回module.exports
。
OK,此次就讲到这里,愿望对同学们进修明白webpack
能有协助。