webpack4.x CommonJS模块化浅析

2023-09-06 00:35:05 262

先看下webpack官方文档中对模块的描述：

在模块化编程中，开发者将程序分解成离散功能块(discretechunksoffunctionality)，并称之为模块。

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

webpack的核心概念之一就是一切皆模块，webpack在项目中的作用就是，分析项目的结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（less，scss，typescript），并将其打包为合适的格式以供浏览器使用，它从一个项目的主文件开始，根据引用路径，找到所有其所依赖的文件，同时将这些文件进行处理（各种loader来解析，编译处理浏览器不能直接使用的文件），然后打包为一个或者多个浏览器可识别的JavaScript文件。

本文不会详细描述webpack的构建流程，毕竟官网已经说得比较详细了，这里主要是分析下webpack打包后的文件，将文件打包成什么样子，又是如何使用模块的。webpack最早支持的代码模块化方式是CommonJS，后面慢慢支持了ES6、AMD等，不论使用的是哪种方式，webpack都可以对其进行解析和打包，本文例子中使用的是CommonJS规范，更多规范介绍可查看官方文档。

例子

为方便后面的说明，首先创建一个项目，也就是先建立一个文件夹webpack-test（名字自拟），然后在里面新建一个package.json文件，用来做npm的说明，在webpack-test文件夹中使用命令：

npminit

执行命令后会询问一些问题，一路回车即可。然后安装下webpack的依赖包，如下命令：

npminstall--save-devwebpack

再新建几个文件：

1、在项目根目录下新建文件夹app用来存放业务代码、文件夹public存放打包后的文件；
2、在app中新建入口文件main.js;
3、在app中新建功能模块hello.js，bye.js，to.js；
4、在项目根目录下，建立index.html文件；

然后依次来给这几个文件分别填写以下内容：

//webpack-test/app/hello.js
constto=require('./to.js');
module.exports=function(){
varhello=document.createElement('div');
hello.textContent="SayHelloto"+to.name;
returnhello;
};

//webpack-test/app/bye.js
constto=require('./to.js');
module.exports=function(){
varbye=document.createElement('div');
bye.textContent="SayByeto"+to.name;
returnbye;
};

//webpack-test/app/to.js
module.exports={name:"小明"};

//webpack-test/app/main.js
consthello=require('./hello.js');
constbye=require('./bye.js');

document.querySelector("#root").appendChild(hello()).appendChild(bye());;

//webpack-test/index.html




WebpackTestProject

//bundle.js文件就是一会儿我们要打包app中的文件后生成的结果文件

业务模块hello.js和bye.js做了各自的操作，同时引用了共同的文件to.js；主文件main.js中引用并执行了模块hello.js和bye.js；index.html文件引入了main.js打包后的最终文件bundle.js。

打包

接下来进行打包操作，先确保webpack是全局安装的，否则执行时需要指定webpack的路径，比如在4.0以下版本中使用node_modules/.bin/webpack./app/main.js./public/bundle.js；
如果你使用的是webpack4.0+的话，使用webpack./app/main.js./public/bundle.js命令，也许会报以下的错误：

WARNINGinconfiguration
The'mode'optionhasnotbeenset,webpackwillfallbackto'production'forthisvalue.Set'mode'optionto'development'or'production'toenabledefaultsforeachenvironment.
Youcanalsosetitto'none'todisableanydefaultbehavior.Learnmore:https://webpack.js.org/concepts/mode/

ERRORinmulti./app/main.js./public/bundle.js
Modulenotfound:Error:Can'tresolve'./public/bundle.js'in'/Users/zhaohaipeng/soyoung-project/webpack-test'
@multi./app/main.js./public/bundle.jsmain[1]

webpack4.0+之后，针对第一个报错，需要指定环境--modedevelopment；第二个报错，是因为我们没有使用配置文件的方式打包，而是直接使用的命令指定的打包输出位置，所以需要声明输出文件，综上，正确的命令如下：

webpackapp/main.js--outputpublic/bundle.js--modedevelopment

执行结果：

➜ webpack-testwebpackapp/main.js--outputpublic/bundle.js--modedevelopment
Hash:a4e2f9ecc51b64891624
Version:webpack4.25.1
Time:90ms
Builtat:2018-11-0817:11:01
Asset Size Chunks ChunkNames
bundle.js 5.16KiB main [emitted] main
Entrypointmain=bundle.js
[./app/bye.js]165bytes{main}[built]
[./app/hello.js]173bytes{main}[built]
[./app/main.js]144bytes{main}[built]
[./app/to.js]30bytes{main}[built]
➜ webpack-test

浏览器打开index.html文件，即可看到结果

SayHelloto小明
SayByeto小明

但是webpack作为一个能简化我们开发难度和使用便捷的工具，显然像上面那样通过敲很多命令来打包，并不方便，所以下面采用配置文件的方式再来一次：

根目录创建webpack.config.js文件，并配置下打包入口和出口：

//webpack-test/webpack.config.js
module.exports={
mode:"development",//webpack.0之后需要声明环境
entry:__dirname+"/app/main.js",//唯一入口文件
output:{
path:__dirname+"/public",//打包后的文件存放目录
filename:"bundle.js"//打包后输出文件名
}
}

再次打包的时候，只需要使用命令webpack就可以了，webpack默认读取当前路径下的webpack.config.js文件。

最终打包好的bundle.js文件，去除了多余注释，调整了代码格式，内容如下：

//自执行函数，参数为所有模块组成的，形势为key:value，key是模块名
(function(modules){//webpackBootstrap
//已加载模块的缓存，记录模块的加载情况，也是为了避免重复打包，节省资源
varinstalledModules={};

//webpack使用require方式加载模块的方法（模拟ConmmonJSreqiure()），作用为根据传进来的模块id来处理对应的模块，加入已加载缓存，执行，标记，返回exports
function__webpack_require__(moduleId){
//moduleId为模块路径
//检测模块是否已加载，已加载的话直接返回该模块
if(installedModules[moduleId]){
returninstalledModules[moduleId].exports;
}
//当前模块未加载的话，新建，并存于缓存
varmodule=installedModules[moduleId]={
i:moduleId,
l:false,
exports:{}
};

//在当前模块的exports下，也就是模块的内部执行模块代码，突出作用域
modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);

//标记模块已经加载
module.l=true;

//返回模块的导出内容
returnmodule.exports;
}


//挂载属性，该模块(__webpack_modules__)
__webpack_require__.m=modules;

//挂载属性，模块加载缓存
__webpack_require__.c=installedModules;

//本代码中未执行，暂时不分析
//在exports中定义getter方法
__webpack_require__.d=function(exports,name,getter){
//当name属性不是定义在对象本身，而是继承自原型链，则在在exports中定义getter方法
if(!__webpack_require__.o(exports,name)){
Object.defineProperty(exports,name,{enumerable:true,get:getter});
}
};

//本代码中未执行，暂时不分析
//在exports中定义__esModule，定义key为Symbol的属性（在__webpack_require__.t中被调用）
//define__esModuleonexports
__webpack_require__.r=function(exports){
if(typeofSymbol!=='undefined'&&Symbol.toStringTag){
Object.defineProperty(exports,Symbol.toStringTag,{value:'Module'});
}
Object.defineProperty(exports,'__esModule',{value:true});
};

//本代码中未执行，暂时不分析
//创建一个伪命名空间的对象
//createafakenamespaceobject
//mode&1:valueisamoduleid,requireit
//mode&2:mergeallpropertiesofvalueintothens
//mode&4:returnvaluewhenalreadynsobject
//mode&8|1:behavelikerequire
__webpack_require__.t=function(value,mode){
if(mode&1)value=__webpack_require__(value);
if(mode&8)returnvalue;
if((mode&4)&&typeofvalue==='object'&&value&&value.__esModule)returnvalue;
varns=Object.create(null);
__webpack_require__.r(ns);
Object.defineProperty(ns,'default',{enumerable:true,value:value});
if(mode&2&&typeofvalue!='string')for(varkeyinvalue)__webpack_require__.d(ns,key,function(key){returnvalue[key];}.bind(null,key));
returnns;
};

//本代码中未执行，暂时不分析
//getDefaultExportfunctionforcompatibilitywithnon-harmonymodules
__webpack_require__.n=function(module){
vargetter=module&&module.__esModule?
functiongetDefault(){returnmodule['default'];}:
functiongetModuleExports(){returnmodule;};
__webpack_require__.d(getter,'a',getter);
returngetter;
};

//Object.prototype.hasOwnProperty.call
//判断一个属性是定义在对象本身而不是继承自原型链
__webpack_require__.o=function(object,property){returnObject.prototype.hasOwnProperty.call(object,property);};

//__webpack_public_path__
__webpack_require__.p="";


//加载入口模块main.js，返回exports，从而从入口文件开始执行，以递归的方式，将所有依赖执行并返回
return__webpack_require__(__webpack_require__.s="./app/main.js");
})({

"./app/bye.js":(function(module,exports,__webpack_require__){

eval("constto=__webpack_require__(/*!./to.js*/\"./app/to.js\");\nmodule.exports=function(){\nvarbye=document.createElement('div');\nbye.textContent=\"SayByeto\"+to.name;\nreturnbye;\n};\n\n//#sourceURL=webpack:///./app/bye.js?");

}),

"./app/hello.js":(function(module,exports){

eval("module.exports=function(){\nvarhello=document.createElement('div');\nhello.textContent=\"SayHello!\";\nreturnhello;\n};\n\n//#sourceURL=webpack:///./app/hello.js?");

}),

"./app/main.js":(function(module,exports,__webpack_require__){

eval("consthello=__webpack_require__(/*!./hello.js*/\"./app/hello.js\");\nconstbye=__webpack_require__(/*!./bye.js*/\"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//#sourceURL=webpack:///./app/main.js?");

}),

"./app/to.js":(function(module,exports){

eval("module.exports={name:\"小明\"};\n\n//#sourceURL=webpack:///./app/to.js?");

})

});

分析

webpack的运行过程可分为：读取配置参数，实例化插件，模块解析处理（loader），输出打包文件；在上面例子中，仅为JavaScript的引用，没有使用插件和像CSS、less、图片之类需要loader处理的模块，所以上面的例子，过程只有读取配置，识别入口及其引用模块，打包几步，生成最终的bundle.js文件。

简单描述下webpack在这个过程中的执行流程：在配置文件中读取入口，如果有配置plugins参数，那么也是在此时进行插件的实例化和钩子函数的绑定；模块解析，也就是loader加入的时刻，从入口文件开始，根据入口文件对其他模块的依赖，结合配置文件中对不同种类型文件所使用的loader（加载器）说明，一个一个逐级对这些模块进行解析处理，或压缩，或转义，生成浏览器可以直接识别的内容；最后将所有模块进行打包，输出打包后的文件。在上面的代码中，已经对bundle.js内容进行了内容注释，下面我们来分析下bundle.js的执行过程：

1、自执行函数

最后的输出的文件bundle.js是一个JavaScript文件，其本身其实是一个自执行函数

(function(参数){})(参数)。

2、参数

自执行方法的参数为所有模块组成的对象，key为各个模块的路径，值为各模块内部的执行代码，观察参数内部的代码，对比打包前的源码，可以发现凡是require都变成了__webpack_require__这个webpack自定义的模块调用方法，而且源码中的相对路径也变成了最终执行位置的文件的相对路径。

{

"./app/bye.js":(function(module,exports,__webpack_require__){

eval("constto=__webpack_require__(/*!./to.js*/\"./app/to.js\");\nmodule.exports=function(){\nvarbye=document.createElement('div');\nbye.textContent=\"SayByeto\"+to.name;\nreturnbye;\n};\n\n//#sourceURL=webpack:///./app/bye.js?");

}),

"./app/hello.js":(function(module,exports){

eval("module.exports=function(){\nvarhello=document.createElement('div');\nhello.textContent=\"SayHello!\";\nreturnhello;\n};\n\n//#sourceURL=webpack:///./app/hello.js?");

}),

"./app/main.js":(function(module,exports,__webpack_require__){

eval("consthello=__webpack_require__(/*!./hello.js*/\"./app/hello.js\");\nconstbye=__webpack_require__(/*!./bye.js*/\"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//#sourceURL=webpack:///./app/main.js?");

}),

"./app/to.js":(function(module,exports){

eval("module.exports={name:\"小明\"};\n\n//#sourceURL=webpack:///./app/to.js?");

})

}

3、执行

（1）自执行文件开始执行后，到自执行函数最底部，首先从入口文件开始加载

return__webpack_require__(__webpack_require__.s="./app/main.js");

（2）__webpack_require__函数被调用，传入参数./app/main.js，

function__webpack_require__(moduleId){
//moduleId为./app/main.js
//首次进来，未加载，模块还没有缓存
if(installedModules[moduleId]){
returninstalledModules[moduleId].exports;
}
//新建./app/main.js模块，并存于缓存
varmodule=installedModules[moduleId]={
i:moduleId,
l:false,
exports:{}
};

modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);

//标记模块已经加载
module.l=true;

//输出模块的内容
returnmodule.exports;
}

此时方法中执行modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);相当于在名为./app/main.js的模块中执行如下代码：

(function(module,exports,__webpack_require__){

eval("consthello=__webpack_require__(/*!./hello.js*/\"./app/hello.js\");\nconstbye=__webpack_require__(/*!./bye.js*/\"./app/bye.js\");\n\ndocument.querySelector(\"#root\").appendChild(hello()).appendChild(bye());;\n\n//#sourceURL=webpack:///./app/main.js?");

})()

由于引用关系，接下来会再次执行两次__webpack_require__方法，分别传参模块路径./app/hello.js和./app/bye.js；

（3）执行第一个__webpack_require__过程，除了传参不同、执行的模块不同，与第二步基本一致，再次找到了依赖模块to.js，再次调用__webpack_require__。

"./app/hello.js":(function(module,exports,__webpack_require__){

eval("constto=__webpack_require__(/*!./to.js*/\"./app/to.js\");\nmodule.exports=function(){\nvarhello=document.createElement('div');\nhello.textContent=\"SayHelloto\"+to.name;\nreturnhello;\n};\n\n//#sourceURL=webpack:///./app/hello.js?");

}),

（4）执行第二个__webpack_require__时，在bye.js中找到了对于to.js的依赖，所以将继续调用__webpack_require__方法，只是传参变成了./app/to.js，达到终点。

"./app/bye.js":(function(module,exports,__webpack_require__){

eval("constto=__webpack_require__(/*!./to.js*/\"./app/to.js\");\nmodule.exports=function(){\nvarbye=document.createElement('div');\nbye.textContent=\"SayByeto\"+to.name;\nreturnbye;\n};\n\n//#sourceURL=webpack:///./app/bye.js?");

})

（5）到此时，整个从入口文件的开始的针对所依赖模块的解析已经完成，所有的js代码也已经引用完毕且放到了bundle.js中。

总结

到这里可以看到，webpack对js的打包，就是封装为一个个单独的方法，通过对这些方法的引用，达到模块化的效果；而打包的过程，就是查找、解析、封装这些方法的过程，整个执行路径类似于一棵树，从主干出发，沿着树枝递归式的执行“require”方法，而且是直到这一根树枝走到尽头的时候才回头寻找其他的方法，由于node的单线程，当项目庞大或者模块间依赖错综复杂时，webpack打包会更加的耗费时间。

以上为对webpack4.x中针对js模块处理的简单理解，主要基于官方文档的介绍和打包后文件的分析，源码读起来还是比较难懂，暂时不敢照量。对于ES6、AMD的模块化方式，代码分割的等，后续再进行补充。希望对大家的学习有所帮助，也希望大家多多支持毛票票。

webpack4.x CommonJS模块化浅析

热门推荐

随机推荐