资讯专栏INFORMATION COLUMN

Webpack模块化原理简析

tracy / 2241人阅读

摘要:模块化原理简析的核心原理一切皆模块在中,,静态资源文件等都可以视作模块便于管理,利于重复利用按需加载进行代码分割,实现按需加载。模块化原理以为例,分析构建的模块化方式。

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学习,简析babel-loader

    摘要:用来转换内容,内部调用了方法进行转换,这里简单介绍一下的原理将代码解析成,对进行转译,得到新的,新的通过转换成,核心方法在中的方法,有兴趣可以去了解一下。将函数传入参数和归并,得到。通常我们是用不上的,估计在某些中可能会使用到。 什么是Loader? 继上两篇文章webpack工作原理介绍(上篇、下篇),我们了解到Loader:模块转换器,也就是将模块的内容按照需求装换成新内容,而且每...

    wpw 评论0 收藏0
  • Webpack Loader简析(一):基本概念

    摘要:需要得到最后一个产生的处理结果。这个处理结果应该是或者被转换为一个,代表了模块的源码。另外还可以传递一个可选的结果格式为对象。在异步模式中,必须调用,来指示等待异步结果,它会返回回调函数,随后必须返回并且调用该回调函数。 准备工作 安装 Node.js, 建议安装LTS长期支持版本 mkdir webpack and cd webpack and npm init -y npm ...

    sherlock221 评论0 收藏0
  • 有价值的前端技术点

    摘要:借着产品层面的功能和视觉升级,我们用对它进行了一次技术重构。前端优化是一个让人技术提升的,希望你也能从这里学到一些东西。年最流行的前端链接我们每周会给多名前端开发者发送新闻邮件。 面试 -- 网络 HTTP 现在面试门槛越来越高,很多开发者对于网络知识这块了解的不是很多,遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自 《图解 HTTP》与维基百科,若有错...

    microelec 评论0 收藏0
  • Weex系列(4) —— 老生常谈的三端统一

    摘要:刚看到这仨页面的时候,我就想着可以用路由,做成三端统一。样式这部分真的三端基本是高度统一的,部分微调一下就可以了,也正是这样,我们后续才能迅速解决和。终于不是谈谈三端统一了,也是真的体验了一次,虽然最后有点出入,但是下次基本是没问题了。 目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(...

    wzyplus 评论0 收藏0

发表评论

0条评论

tracy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<