摘要:模块化原理简析的核心原理一切皆模块在中,,静态资源文件等都可以视作模块便于管理,利于重复利用按需加载进行代码分割,实现按需加载。模块化原理以为例,分析构建的模块化方式。
webpack模块化原理简析
1.webpack的核心原理
一切皆模块:在webpack中,css,html.js,静态资源文件等都可以视作模块;便于管理,利于重复利用;
按需加载:进行代码分割,实现按需加载。
2. webpack模块化原理:以js为例,分析webpack构建common.js的模块化方式。
①构建示例代码
//b.js let b =3 export {b}; //a.js let b = require("./b.js") let a = b+123; //webpack.config.js let path = require("path") module.exports = { entry: "./a.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "build")}, module: { loaders: [{ test: /.js$/, loader: "babel-loader", query: { presets: ["es2015"]}}}}
②分析bundle.js
a.整体结构:整个bundle.js整个是一个执行函数,传进去的参数是一个个的模块,也是一个的函数,通过函数的作用于达到模块化的效果。
(function (modules) {………………})([ //模块初始化 function (module, exports, __webpack_require__) { /* 模块a.js的代码 */}, function (module, exports, __webpack_require__) { /* 模块b.js的代码 */}]);
b.模块初始化
//1.定义一个模块缓存的容器 var installedModules = {}; //2.webpack的require实现 function __webpack_require__(moduleId) {//传参是模块ID //3.判断模块是否缓存,若是缓存了就不用加载,直接返还这个已缓存的模块 if(installedModules[moduleId]) { return installedModules[moduleId].exports;} // 4.若是没有被缓存,则缓存这个模块 var module = installedModules[moduleId] = { i: moduleId, //模块ID l: false, //标识模块是否加载 exports: {} }; //5.执行模块函数,modules代表一系列的模块函数,要动态绑定module.exports,绑定this;可以交叉连续引用。 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // 6.标记模块已经被加载 module.l = true; // 7.返回该模块的exports return module.exports;} //8.require第一个 模块 return __webpack_require__(0); }
c.模块函数
//a.js模块 function(module, exports, __webpack_require__) { "use strict"; var b = __webpack_require__(1);//重复调用 var a = b + 123;} //b.js模块 function(module, exports, __webpack_require__) { "use strict"; var b = 3; exports.b = b;}
d.下面是执行的流程图,指定一个初始模块,所有被引用的模块会响应的循环加载。
ps几个小问题
1.在模块加载的时候,最后传递的一个参数是__webpack_require__,是全局定义的函数,为什么是全局的呢,因为自执行函数的this指向全局。
2.commond.js需要注意模块导出的问题
①exports不能直接赋值,无用,因为源码中返回的是module.exports;
②可以在exports上增加属性,比如exports.fn=;这样module.exports会变化,最终导出的是module.exports也会变化;
//node.js部分源码,node也是通过闭包实现模块的隔离 (function(exports,module,require,__dirname,__filename){ this = module.exports //this是指向module.exports的 module.exports = exports = {} return module.exports})()
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84461.html
摘要:用来转换内容,内部调用了方法进行转换,这里简单介绍一下的原理将代码解析成,对进行转译,得到新的,新的通过转换成,核心方法在中的方法,有兴趣可以去了解一下。将函数传入参数和归并,得到。通常我们是用不上的,估计在某些中可能会使用到。 什么是Loader? 继上两篇文章webpack工作原理介绍(上篇、下篇),我们了解到Loader:模块转换器,也就是将模块的内容按照需求装换成新内容,而且每...
摘要:需要得到最后一个产生的处理结果。这个处理结果应该是或者被转换为一个,代表了模块的源码。另外还可以传递一个可选的结果格式为对象。在异步模式中,必须调用,来指示等待异步结果,它会返回回调函数,随后必须返回并且调用该回调函数。 准备工作 安装 Node.js, 建议安装LTS长期支持版本 mkdir webpack and cd webpack and npm init -y npm ...
摘要:刚看到这仨页面的时候,我就想着可以用路由,做成三端统一。样式这部分真的三端基本是高度统一的,部分微调一下就可以了,也正是这样,我们后续才能迅速解决和。终于不是谈谈三端统一了,也是真的体验了一次,虽然最后有点出入,但是下次基本是没问题了。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...
阅读 1510·2021-11-23 09:51
阅读 1064·2021-10-12 10:12
阅读 2782·2021-09-22 16:06
阅读 3595·2019-08-30 15:56
阅读 3369·2019-08-30 15:53
阅读 3070·2019-08-29 16:29
阅读 2320·2019-08-29 15:27
阅读 1989·2019-08-26 10:49